Kendo Editor: Modify command content before insert

[Mrugendra]

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.

 

[Neli]

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