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:
Razor view:
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
>