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

[Peter]

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)?

[Dimo]

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.

http://demos.telerik.com/kendo-ui/editor/snippets

===

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

http://demos.telerik.com/kendo-ui/editor/styles

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.

Regards,
Dimo
Telerik