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