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

i need build in-browser wysi(more-or-less)wyg editor specific subset of html. requires model html elements can decorated additional markup editing support. possibly, model html elements have replaced entirely purpose of editing.

i want avoid transforming , forth between editor markup html , output markup html because has proved error-prone in previous incarnation of component.

instead, want clean separation of model , view, preferable using 1 of client-side mvc frameworks such react.js.

how can achieved? far, have come following ideas:

• represent model browser dom , use model views generate editor markup (and behaviour)
• represent model using react's virtual dom (is possible?)
• roll own model representation using javascript's data types. however, require writing parser , serializer, i'd avoid.

how done in other editor components? approach feasible?

edit: clarify use case bit more, not looking architecture supports usual editing of inline elements <strong>, <a> et al. combination of in-place-editing of inline elements (i'm considering using ckeditor this) more structural edits such cloning <div>s , layout <table>s , moving them around.

if understand question correctly, want edit several elements in single page?

in such case recommend writing "module" using angularjs directives (wired attribute semantic html same not applied @ document). directive (when angular app loaded) should change elements "editable" attribute allow user edit content of element. lets template this:

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

it scenario when user blur div fires event in directive , sends content backend.

here working directive candidate review https://github.com/terrymooreii/angular-wysiwyg

bottom line, can have multiple "placeholders" in page, define layout , web parts placed in page, other things in hands of page moderator.

one more note, name each placeholder, can identify them on backend , fill data if case that, or use jquery/angular fill them on page load. question preferred way :)

on backend side, use redis or mongo store place holder logical structure rather trying represent complete dom structure , recreate each time 1 reads backend. quicker load way.

for parts want drag , drop on page, again need place holders, different kind of "editor" need additional angular directive. here 1 more gaining knowladge on how to. http://codef0rmer.github.io/angular-dragdrop.

combining two, have close need. again. have (as developer) responsible page layout, since have define @ least top level (drag , drop) placeholders are.