How can I achieve view-model separation in a Javascript component for editing HTML?

Question

I need to build an in-browser WYSI(more-or-less)WYG editor for a specific subset of HTML. This requires that the model HTML elements can be decorated with additional markup for editing support. Possibly, some model HTML elements will have to be replaced entirely for the purpose of editing.

I want to avoid transforming back and forth between the editor markup HTML and the output markup HTML because this has proved to be very error-prone in the previous incarnation of the component.

Instead, I want a clean separation of model and view, preferable using one of the client-side MVC frameworks such as React.js.

How can this be achieved? So far, I have come up with the following ideas:

• Represent the model as browser DOM and use this as the model for the views that generate the editor markup (and behaviour)
• Represent the model using React's virtual DOM (is this even possible?)
• Roll my own model representation using Javascript's data types. However, this will require writing a parser and a serializer, which I'd very much like to avoid.

How is this done in other editor components? Is this approach even feasible?

Edit: To clarify the use case a bit more, I am not looking for an architecture that supports the usual editing of inline elements like <strong>, <a> et al. but a combination of in-place-editing of inline elements (I'm considering using something like CKEditor for this) as well as more structural edits such as cloning <div>s and layout <table>s and moving them around.

Answer 1

If I could understand your question correctly, you want to edit several elements in single page?

In such case I would recommend writing this "module" using angularjs directives (wired by attribute so your semantic to html is same as it is not applied at all to document). This directive (when angular app is loaded) should change elements "editable" attribute which would allow user to edit content of element. So lets say template is like this:

<div id="title-editor" my-editor>...</div>

it could be scenario when user blur this div it then fires event in directive and sends content to backend.

Here is working directive which could be candidate to review it https://github.com/TerryMooreII/angular-wysiwyg

Bottom line, is that you can have multiple "placeholders" in page, so you define layout and what web parts are placed where in page, other things are in hands of page moderator.

One more note, name each placeholder, so you can identify them on backend and fill data if your case is like that, or you could use jquery/angular to fill them on page load. It is question what is your preferred way :)

On backend side, you could use redis or mongo to store this place holder logical structure rather then trying to represent complete DOM structure and recreate it each time one reads it from backend. So it would be much quicker to load this way.

For parts which you want to drag and drop on page, again you will need some place holders, but this is different kind of "editor" so you would need additional angular directive. Here is one more which could help gaining knowladge on how to. http://codef0rmer.github.io/angular-dragdrop.

Combining this two, you could have something close to what you need. Again. You have to (as developer) be responsible for page layout, since you have to define at least where top level (drag and drop) placeholders are.