Questions on Kendo UI for jQuery Forum

1 answer

21 views

Custom Tools for Kendo Editor

Would like to check on how to achieve the following

Having a custom button/control to allow user to add a placeholder for youtube video with the following requirements, when in editor when show some short of placeholder where user can enter the youtube link. when displaying the content out on a page, the placeholder will become an iframe to show the video
for image upload, how do i integrate to MS SQL Database such that all uploads will be saved to the DB, user will also be able to select image previously uploaded by other users

Editor

answered on 26 Jan 2026

1 answer

39 views

insertHTML does not work in Firefox

Hi

I'm using Kendo UI for jQuery.

I have the following code which works fine in Chrome and Edge on Windows

var ke = $('#editor').data("kendoEditor");
ke.value('');
ke.exec("insertHtml", { html: 'hello' });
ke.update();

but in Firefox i get the following issue

jQuery.Deferred exception: can't access property "removeAllRanges", t is null selectRange@http://localhost/libs/KendoUI/kendo.all.min.js:9:2152299

Can you help please?

Thanks

Craig

Editor

answered on 26 Dec 2025

1 answer

83 views

Editor change event triggered when text not changed

I have an editor configured like this:

                @(Html.Kendo().EditorFor(m => m.MyTextData)
                    .Tag("div")
                    .Name("MyTextData")
                    .Resizable(x =>
                    {
                        x.Content(true);
                        x.Min(120);
                        x.Max(400);
                        x.Toolbar(false);
                    })
                    .StyleSheets(css => css.Add(Url.ContentVersioned("~/Content/EditorStyles.css")))
                    .Encode(false)
                    .Events(e => e.Change("onEditorChangeOfContent"))
                    .Tools(tools => tools
                        .Clear()
                        .Bold()
                        .Italic()
                        .Underline()
                        .JustifyLeft()
                        .JustifyCenter()
                        .JustifyRight()
                        .InsertUnorderedList()
                        .InsertOrderedList()
                        .InsertLowerRomanList()
                        .InsertUpperRomanList()
                        .Indent()
                        .Outdent()
                        .FirstLineIndent()
                        .SubScript()
                        .SuperScript()
                        .TableEditingWithCellBorder()
                    )
                )

When first clicking in the editor text area then clicking out of the text area without changing any of the text, the blur function is called and in the blur function a comparison is made between "value" and "old". In this first call to blur, old is undefined so the match is not made and the change event is triggered as if the text was changed. Note that if the same action of clicking in and out of the text area is done again, old contains the correct value and no change event is triggered, so it works differently the second time. The change event should not be triggered on the first action as the text was not changed.

Here is the blur function in Kendo:

         _blur: function() {
                var textarea = this.textarea;
                var old = textarea ? textarea.val() : this._oldValue;
                var value = this.options.encoded ? this.encodedValue() : this.value();

                this.update();

                if (textarea) {
                    textarea.trigger("blur");
                }

                if (value != old) {
                    this.trigger("change");
                    if (textarea) {
                        textarea.trigger("change");
                    }
                }

Editor

answered on 22 Dec 2025

1 answer

94 views

How to track all content changes in Kendo UI Editor (including delete, backspace, paste, image removal)?

I’m using the kendo UI and need to track all changes made by the user. The scenarios include:

Removing an image by backspace or delete.
Using Backspace or Delete to remove text.
Selecting text and deleting it by keyboard or mouse like (cut option using right-click context menu.).
Copying text from outside and pasting into the editor (via keyboard or mouse).
Pasting images or text using right-click context menu.

Is there a single common event or the best approach to handle all these cases?
I’ve checked the change event, but it doesn’t seem to fire for all scenarios (e.g., backspace or image removal). Should I use keyup, paste, or a combination of events? Or is there a recommended way to detect any DOM/content change in the editor?

Any guidance or best practices would be appreciated.

Editor

answered on 07 Nov 2025

3 answers

249 views

HTML editor.value() and editor.body.innerHTML return different values

Hello,

When focused in the HTML editor, I set the default font and font size and add a p tag to the outermost.
Then when I try to get the editor value with editor.value() it automatically gets a space ' ' is being added, but when I read it with editor.body.innerHTML there is no space.
This does not allow you to check whether the space was added by the user.

If from now on I get the editor value with editor.body.innerHTML, could problems occur?
Or what can I do so editor.value() doesn't automatically add spaces?

Thanks

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({ tools: [
    "bold", "italic", "underline", "fontName", "fontSize"
  ]});

var editor = $("#editor").data("kendoEditor");

$(editor.body).focus(function (e) {
    editor.exec("fontName", { value: "Tahoma" });
    editor.exec("fontSize", { value: "10pt" });
    var content = editor.value();
    
    if (content.indexOf('<p') !== 0)
        editor.value('<p>'+ content +'</p>');

    console.log(editor.value());
    console.log(editor.body.innerHTML);
});

</script>

Result:
editor.value():  
editor.body.innerHTML:

Editor

answered on 07 May 2025

1 answer

70 views

Arabic Conversion not happening

We tried to apply the arabic conversion logic to the page. We have control like textbox, dropdown, date and grids with labels. The labels of all controls was changed without any issue. The grid column header caption and the data was also changed.

But the value inside the textbox, dropdown was not changed. Any guidance to resolve this issue.

I used the below code to enable the Google Translation in page.

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'ar,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}

I herewith shared a video for your reference.

answered on 05 Feb 2025

1 answer

103 views

We are trying to create a Editor custom toolbar button with a defined SVG. No matter what we try, we are unable to change the default SVG button.

I am are trying to create a custom toolbar button with a defined SVG.

No matter what we try, we are unable to change the default SVG button.

The documentation says that the name will be used to apply a k-name class. We can then use that to apply our own SVG. How can we change the SVG on a custom button?

Example - https://dojo.telerik.com/NyxxkxYJ

The following example demonstrates how to add a custom tool button. To enable styling where toolName is the specified name in the custom tool configuration, the custom buttons get a k-toolName CSS class. The undo and redo tool names are reserved.

Editor

answered on 08 Jan 2025

1 answer

76 views

[Solved] Table Accessibility with Caption alignment

This can be tested using the Kendo editor demo on the website. Create a table using the Wizard and under the Advanced tab, create a Caption in the Accessibility options. Select a bottom alignment for the caption. Although the style of vertical-align: bottom is applied to the caption, the text of the caption is still shown above the table. Is this the correct way for the caption alignment to work? Our clients expected the caption to be positioned below the table when selecting one of the bottom alignment options. Thanks for any help.

Editor

answered on 19 Dec 2024

1 answer

177 views

[Solved] Programmatically add Font Sizes to Editor

Having a Kendo editor declared like this:

                @(Html.Kendo().EditorFor(m => m.MyEditor)
                            .Name("MyEditor")
                            .Resizable(true)
                            .StyleSheets(css => css.Add(Url.Content("~/Content/EditorStyles.css")))
                            .Messages(messages => messages
                                .FontNameInherit("Default")
                                .FontSizeInherit("Default")
                            )
                            .Tools(tools => tools
                                .Clear()
                                .Bold()
                                .Italic()
                                .Underline()
                                .JustifyLeft()
                                .JustifyCenter()
                                .JustifyRight()
                                .InsertUnorderedList()
                                .InsertOrderedList()
                                .Indent()
                                .FontName(fonts => fonts
                                    .Add("Arial", "Arial")
                                    .Add("Courier New", "Courier New")
                                    .Add("Helvetica", "Helvetica")
                                    .Add("Times New Roman", "TimesNewRoman")
                                    .Add("Verdana", "Verdana")
                                )
                                .FontSize(sizes => sizes
                                    .Add("8", "8pt")
                                    .Add("9", "9pt")
                                    .Add("10", "10pt")
                                    .Add("12", "12pt")
                                    .Add("14", "14pt")
                                    .Add("16", "16pt")
                                    .Add("18", "18pt")
                                    .Add("20", "20pt")
                                )
                        ))

Is there any way to programmatically add the font sizes instead of with the fixed .Add method? I need to read a configuration file in the model then based on the font sizes of the configuration, add only those font sizes to the dropdown. I am a little stumped on how to do this using the EditorDropDownItemBuilder approach. Thanks for any help.

Editor

answered on 20 Nov 2024

1 answer

63 views

Regarding link customization

Hi,

Can we customize the hyperlink dialog in your editor?

Editor

answered on 07 Nov 2024