How can I extend kendo editor widget?

Question

I need to extend kendo ui Editor widget and custom that. However, there is strange error in toolbar.js

So I extend Editor widget and define init methods. In init methods, I call init method from parent using by 'call'. I defined 'tool' options including 'formatting' when initializing Editor instance.

I just extended Editor widget and defined init method like below.

let kendo = window.kendo
let Editor = kendo.ui.Editor

let widget = Editor.extend({
  init: function (element, options) {
    Editor.fn.init.call(this, element, options)
  }
})

kendo.ui.plugin(widget)

There are some errors in context of init method. In toolbar.js kendo.ui.Editor.defaultTools is undefined....

How can I solve this problem?

isCustomTool: function(toolName) {
  return !(toolName in kendo.ui.Editor.defaultTools);
},

TypeError: Cannot use 'in' operator to search for 'formatting' in undefined
    at init.isCustomTool (toolbar.js?a639:509)
    at init.toolGroupFor (toolbar.js?a639:294)
    at init.render (toolbar.js?a639:641)
    at init.bindTo (toolbar.js?a639:322)
    at subclass.init (main.js?d94c:394)
    at new subclass (kendo.core.js?0f57:193)
    at HTMLTextAreaElement.eval (kendo.core.js?0f57:3342)
    at Function.each (jquery.js?eedf:367)
    at kendoJQuery.fn.init.each (jquery.js?eedf:202)
    at kendoJQuery.fn.init.$.fn.<computed> [as kendoEditor] (kendo.core.js?0f57:3341)

Answer 1

You should provide unique name to you custom widget:

let widget = Editor.extend({
    init: function (element, options) {
        ...
     },
     options: {
         name: 'MyEditor',
         ...
     }
})

Kendo uses 'name' field to register widgets in common namespace. You defined a widget with an inherited name, so the standard kendo's Editor widget was overwritten.