This is a migrated thread and some comments may be shown as answers.

ImageBrowser - Can't select an uploaded image.

2 Answers 106 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Zeo asked on 10 Mar 2014, 06:00 PM

We are using the KendoUI editor with success for our clients to publish HTML embedded news items on there portals.

Now that we like to add image support with use of the ImageBrowser we however run into issues, we are using the MVC wrapper, and purchased the Compleate DevCraft Toolbox.

Used this example: http://demos.telerik.com/kendo-ui/web/editor/imagebrowser.html

First the complete example, now a straight forward version where I do inhered the EditorImageBrowserController on the controller and overwrite the ContentPath, nothing more nothing less. Just to make troubleshooting clear of the copy of the shared folder.

Uploading images and everything seems to be working nicely, when pressing the [Insert] button the URL in the [Web address] field is added to the editor.
However I am not able to select one of the uploaded images, they are not highlighted with clicking on it not is the address populated to the [Web address] field.

Double clicking one thumbnail closes the ImageBrowser but is not adding an image tag to in the Editor. Also when checking the HTML-view there are no changed made to the content.

Below some details, but seems simple enough and can't find the cause of this issue, everything should be handled by the EditorImageBrowserController, right?.
Advice and corrections are welcome !

Thanks in advance.

---

Using :
KendoUI MVC : 2013.2.716.340
KendoWeb : 2013.2.716
jQuery : 1.9.0 with migrate 1.2.1

Controller:

using System.Web.Mvc;

using Kendo.Mvc.UI;

public class ImageBrowserController : EditorImageBrowserController

{

public override string ContentPath

{

get

{

return "~/Content/UserGenerated/Images";

}

Razor view:

@using Business.Models

@model Business.Models.UserContent

<div class="full_width settings">

<h3 class="NieuwsEditor">Edit</h3>

<p>Titel : @Html.TextBoxFor(m => m.Title, new { @class = "k-input k-textbox" })

</p>

<p>Release Datum : @(Html.Kendo().DatePicker()

.Name("ReleaseDate")

.Min(new DateTime(1999, 1, 1))

.Max(DateTime.Today.AddYears(1))

.Value(Model.Release)

)

</p>

<p>Organistatie Eenheid : @(Html.Kendo().DropDownList()

.Name("OrgEenheid")

.HtmlAttributes(new { style = "width: 250px" })

.DataTextField("OEDescription")

.DataValueField("OEID")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetMyOEs", "Manage");

});

})

.Value(Model.OrgEenheid.ToString())

)

</p>

@(Html.Kendo().Editor()

.Name("ContentEditor")

.HtmlAttributes(new { style = "width: 740px;height:440px" })

.Tools(tools => tools

.Clear()

.Bold().Italic().Underline().Strikethrough()

.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()

.InsertUnorderedList().InsertOrderedList()

.Outdent().Indent()

.CreateLink().Unlink()

.InsertImage()

.SubScript()

.SuperScript()

.TableEditing()

.FontSize()

.FontColor().BackColor()

.ViewHtml()

)

.StyleSheets(css => { css.Add(Url.Content("~/Content/css/style.css")); css.Add(Url.Content("~/Content/css/fonts.css")); })

.Value(Model.HTML)

.ImageBrowser(imageBrowser => imageBrowser

.Image("~/Content/UserGenerated/Images/{0}")

.Read("Read", "ImageBrowser")

.Create("Create", "ImageBrowser")

.Destroy("Destroy", "ImageBrowser")

.Upload("Upload", "ImageBrowser")

.Thumbnail("Thumbnail", "ImageBrowser")

)

.Encode(false)

)

<p>

<br />

<button id="SaveContent" type="button" class="k-button right" onclick="javascript:void(0)">Save</button>

</p>

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#SaveContent").click(function () {

var model = {

ContentID: '@Model.ContentID',

ContentTypeID: '@Model.ContentTypeID',

OrgEenheid: $("#OrgEenheid").val(),

UserId: '@Model.UserId',

HTML: $("#ContentEditor").val(),

Title: $('#Title').val(),

Release: kendo.toString($("#ReleaseDate").data("kendoDatePicker").value(), 'yyyy-MM-dd'),

UserContentType: { ContentTypeID: '@Model.UserContentType.ContentTypeID', Type: '@Model.UserContentType.Type', UserGenerated: '@Model.UserContentType.UserGenerated' }

};

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

dataType: "json",

data: JSON.stringify(model),

url: '@Url.Action("SaveContent", "Manage")',

timeout: 40000, // wait upto 40 secs

success: function (result) {

HandleAjaxResult(result);

},

error: function (xhr, status, error) {

$("#editor").html("<span class=\"error\">Error</span>");

}

})

});

</script>

2 Answers, 1 is accepted

Accepted