HTML Editor - incorporate a Watermark image

[Ruairi]

We've implemented a HTML Editor and would like to be able to incorporate a Watermark image behind.  There is no tool at present to allow placing of a Watermark.  How would this be best implemented?

[Dimitar]

Hello Tyler,

In general, the Kendo UI Editor allows a custom action item tool to be added to the toolbar. When it is clicked, a custom JavaScript function can be executed by configuring the exec attribute. You can check this Editor Custom Tools Demo.

On the following Dojo example you can find a very basic implementation of the Editor, where a custom tool is added. When clicked, it sets a background image on the Editor body (centered). This background will also be exported when using the PDF export feature of the widget. 

Regards,
Dimitar
Progress Telerik

[Ruairi]

That worked great.

I would like to allow the user to select an image to be used as a watermark (like the insert image tool.  How straightforward would it be to implement this?

Regards

[Dimitar]

Hello Tyler,

To achieve the desired scenario, I would suggest to try and create a custom tool that creates a dialog, where the user can insert the image URL, which is later used as a background for the editor. You can review and try to combine the example from this How-to article and the previously sent Dojo example.

Regards,
Dimitar
Progress Telerik