Editor for serial printing - how to create non editable fields in the editor

2 posts, 0 answers
  1. Peter
    Peter avatar
    2 posts
    Member since:
    Jun 2015

    Posted 19 Jul 2015 Link to this post

    Hi all,

     we try to develope a Documentservice for one of our projects. In this we need a editor, to create and modify the documents. Our idea: the user is able to set fields in the text. The field could be a tag like this for example:

    <span class="serialfield" sfield='firstname'><span class='sfieldinfo'></span>Firstname<span class='delsfield'></span></span>

    <span class="serialfield" sfield='lastname'><span class='sfieldinfo'></span>Lastname<span class='delsfield'></span></span>​

    The fields should be non-editable. The result should be similar to the attached mockup.

    My questions:

    1. How could it work, that i insert 'non-editable' elements in the editor?

    2. How to style them?

    3. How to get a event on click on them (to remove the element on click on the span.delsfield)?

  2. Dimo
    Dimo avatar
    8319 posts

    Posted 22 Jul 2015 Link to this post

    Hi Peter,

    Non-editable elements can be inserted in the Editor by using the insertHtml tool. The inserted elements must have a contenteditable="false" attribute.



    Custom styling to any element inside the Editor can be applied if you inject the required CSS rules inside an Editor stylesheet.


    You don't have to add custom items to the Formatting tool, if this is not needed. Also, if the Editor is created from a <div> element (inline mode), you don't need to inject an Editor stylesheet at all, simply place the required CSS rules on the page.


    Click handlers can be added via onclick attributes with inline Javascript, applied to the desired DOM elements. This is an old-fashioned approach, but a lot easier, compared to its alternatives.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top