Adding custom button to Kendo editor control

We can customize Kendo editor control with our own custom buttons. Like, say, in any place we are using the kendo editor control and we need to use the horizontal line separation between two Paragraphs. In that case, we will be using the horizontal line very frequently and this is better to add a custom button for drawing the horizontal line.

 

Here is an example how we can one custom button to the Kendo editor control - 

 

@(Html.Kendo().Editor()

    .Name("editor")

      .Tools(tool => tool.CustomButton(cb => cb.Name("custom")

                                               .ToolTip("Draw horizontal line")

                                               .Exec(@<text>

                                                          function() {

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

                                                            editor.exec("inserthtml", { value : "<hr />" })

                                                          } 

                                                    </text>))

        )

)

 

The custom button will be displayed in the tool box and we can simply click that to get our work done quickly.

 

We can add tooltip as well to the button. Like, in the upper example, the button will show a tooltip - "Draw horizontal line" to express what the button does.