Questions on Kendo UI for jQuery Forum

1 answer

6 views

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

19 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

31 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

232 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

59 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

91 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

63 views

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

151 views

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

55 views

Regarding link customization

Hi,

Can we customize the hyperlink dialog in your editor?

Editor

answered on 07 Nov 2024

1 answer

179 views

Editor custom button class name missing

Hi, I just updated from 2022.3.1109 to 2024.3.806 and noticed that the CustomButton method for editor tools no longer creates a class with the provided name. We previously used this as a way add custom images as button icons. It was also the only way to have a unique identifier for the button, which is it's own separate issue. I didn't see anything in the release notes about this functionality being removed so I'm wondering if this is a bug or if we are supposed to use some new method of adding custom button icons. I see there is an Icon method available but it seems to be for using existing telerik icons and I don't see any way to add our own.

This answer in this older question shows two methods, of which we were doing the latter:

https://www.telerik.com/forums/how-to-add-a-customized-button-or-image-button-to-editor-tools

I understand we could probably switch to using CustomTemplate instead, but that seems like added maintenance whenever the default kendo classes or styling changes since we want it to match the appearance of the built-in kendo buttons.

Editor

answered on 11 Oct 2024