Kendo Editor: Modify command content before insert

1 Answer 19 Views
Editor
Mrugendra
Top achievements
Rank 1
Iron
Mrugendra asked on 07 Mar 2022, 03:27 AM

Hi,

For the various kendo editor tools like List, Table etc. we need to change the content before its inserted into the editor. For example, add a CSS class to a UL element or add some data properties.

How do we achieve this? We looked at the command event, however, changing values of the command does not seem to have any impact in the final HTML that is inserted into the editor.

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 09 Mar 2022, 01:11 PM

Hello Mrugendra,

I would suggest you to create a custom tool and customize it according to the requirements. Below you will find such an example:

 {
            name: "custom",
            tooltip: "Insert custom list",
            exec: function(e) {
              var editor = $(this).data("kendoEditor");
              editor.exec("insertorderedlist");

              var list = kendo.ui.editor.Dom.closestEditableOfType($("#editor").data("kendoEditor").getRange().startContainer, ["ol"]);
              if (list) {
                $(list).addClass("custom");               
              }
            }
          }

Here is a Dojo where this si demonstrated. 

I hope this helps.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Mrugendra
Top achievements
Rank 1
Iron
Answers by
Neli
Telerik team
Share this question
or