How to add a customized button or image button to Editor Tools

[Don]

I am using a Kendo Editor for MVC and I would like to add either a custom button or image button in the Editor's Tools.

For example, I would like to add this line so the image can appear in the Tools:

<img id="btnCopy" name="btnCopy" src="~/Images/Copy.png" onclick='doSomething(document.getElementById("myText").value)' />

Is it possible to customize the Editor's Tools? if yes, what do I need to do? An example would be helpful.

[Petar]

Hi Don, 
There are two ways to add the desired custom item in Editor’s toolbar – using  CustomTemplate or using CustomButton. 

Using the CustomTemplete the desired icon could be added by adding the following line in Editor's Tools configuration:

.CustomTemplate(ct => ct.Template("<img id=\"btnCopy\" name=\"btnCopy\" src=\"https://img.icons8.com/material/24/000000/camera.png\" onclick='onClick()' />"))

Using the CustomButton, the icon could be added like this:

.CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule")

With the second approach, we have to make some CSS changes. Here is the needed CSS setting the camera icon in our CustomButton:

.k-i-custom::before {
content:none !important;
}

.k-editor .k-i-custom {
    background-image: url(https://img.icons8.com/material/24/000000/camera.png);
    background-repeat:no-repeat;
    background-size: 100%;
}

Attached you will find a runnable project demonstrating the two approaches + demo how we can attach events to the custom elements.  

Please, check the attached project and let me know if it resolves your issue. 
Looking forward to your answer. 

Regards,
Petar
Progress Telerik

[Don]

Petar,

I used your suggested first approach and it worked well for me. I was able to display an image icon that the user can click on it to call a javascript function.

Note:
Inside my javascript function, I wanted to read the data value typed inside the Editor.
I tried unsuccessfully with: document.getElementById("MyEditorName").value
Finally, I found the answer was: $(document.getElementById("MyEditorName")).data("kendoEditor").value()

Thought this might help someone...

[Petar]

Hi Don,

I’m happy the proposed approach worked for your application scenario. 
Thank you for sharing the additional knowledge with the community!

 

Regards,
Petar
Progress Telerik