asp.net-mvckendo-asp.net-mvckendo-editorcustomtool

How to add Custom tools to kendo editor


How can I add Custom tools to kendo editor toolbar?

I want to add spell checker, Media manager and Cut,Copy , Paste, and cut from word, copy from word and some more tools also.

I am using Kendo editor in MVC application.


Solution

  • I am using a custom tool for adding a link references within the application by searching them from the already existing ones.

    Here you are a code snipped from my source

    @(Html.Kendo()
                      .Editor()
                      .Name("Content")
                      .Tools(tools => tools
                          .Clear()
                          .Bold().Italic().Underline().Strikethrough()
                          .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                          .InsertUnorderedList().InsertOrderedList()
                          .Outdent().Indent()
                          .CreateLink().Unlink()
                          .InsertImage()
                          .SubScript()
                          .SuperScript()
                          .TableEditing()
                          .ViewHtml()
                          .Formatting()
                          .CleanFormatting()
                          .FontName()
                          .FontSize()
                          .FontColor()
                          .BackColor()
                          .CustomButton(cb => cb
                              .Name("Add link to article")
                              .ToolTip("Add link to article")
                              .Exec("execFunction")
                          ))
                          .Encode(false)
                          .ImageBrowser(imageBrowser => imageBrowser
                                 .Image("~/Content/Uploads/Images/{0}")
                                 .Read("Read", "ImageBrowser")
                                 .Create("Create", "ImageBrowser")
                                 .Upload("Upload", "ImageBrowser")
                                 .Thumbnail("Thumbnail", "ImageBrowser")))
    

    So these are my configurations for the editor. I think you are interested only from .CustomButton(cb => cb.Name / this is necessary/ cb.Exec / also neccesary /. In Exec, you pass the name of your JS function that should be executed when the button is clicked. You can connect your JS than with ajax to your controllers. I will share you mine.

    function execFunction(e) {
            $.get('/Articles/BuildLinkView', null, function(data) {
                $('#addLinkHolder').html(data);
                $('#addLinkHolder').css('display', 'table-cell');
            });
        }
    

    Than you can do whatever you wish with it when you bind it to the controller.

    I hope that this solves you issue. If not, please provide additional info