HTML Editor - incorporate a Watermark image

4 posts, 0 answers
  1. Tyler
    Tyler avatar
    51 posts
    Member since:
    Nov 2013

    Posted 17 Aug Link to this post

    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?

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 21 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tyler
    Tyler avatar
    51 posts
    Member since:
    Nov 2013

    Posted 30 Aug in reply to Dimitar Link to this post

    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

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 01 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top