This is a migrated thread and some comments may be shown as answers.

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

1 Answer 32 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 19 Jul 2015, 04:39 PM

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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 22 Jul 2015, 06:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
Peter
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or