2

For the context of my question (coding the MELT monitor, alpha stage GPLv3) see this & that question.

I'm targeting recent HTML5 browsers only (e.g. Firefox 38 or 42, recent Chrome 47, perhaps the latest Safari or Opera...). So I don't care about IE9 and I don't care about browsers before 2014.

I want to code a syntax-directed editor with a Web interface, so my MELT monitor is a specialized Web server program using libonion. I don't want to use existing Web WYSIWYG because my model is an abstract syntax tree, not a syntax-colorized sequence of lines (or part of some HTML5 DOM).

I'm hesitating between a canvas-based code, and a DOM-based approach:

Canvas approach (à la https://github.com/danielearwicker/carota ...) pros:

  • dealing with everything myself
  • no limitations on event, contenteditable,
  • ability to mix graphics & text

cons:

  • have to draw and layout everything, painful (but doable)
  • browser clipboard is very painful (copy & paste):

DOM based approach (à la MCE? CodeMirror?) pros:

  • the browser is doing the layout
  • the clipboard & cut&paste might be easier

cons:

Question:

What is the exact principle behind MCE & CodeMirror and most WYSIWYG web "editors"? Browser input reading is complex... But is having a hidden <textarea> to catch keyboard event working in practice for recent browsers (limited to post 2014 browsers)? Is there some established practice or reference? (I don't even know what to search on the web).

<iframe> has been mentioned in a comment, but I am not sure to understand the relation (in particular iframes and events...). What is the role of iframe (e.g. in tinymce, iframe seems apparently central, but I don't understand why and what for).

Community
  • 1
  • 1
Basile Starynkevitch
  • 223,805
  • 18
  • 296
  • 547
  • 1
    Your dom based approach is missing `iframe` approach which is very common. As for the textarea, it is mostly needed in order to submit conventional forms as well as print server side content and is actually hidden and not focusable in most wysiwyg – charlietfl Nov 09 '15 at 14:53
  • @charlietfl: Could you please explain a bit more, perhaps in some answer? – Basile Starynkevitch Nov 10 '15 at 14:19
  • Many web editors do the actual editing inside iframe. I'm not saying that is the ideal solution for you but is another alternative. – charlietfl Nov 10 '15 at 14:27
  • But `iframe` around what, and what for? Are they to catch events? Could you explain more? I never saw mention of `iframe` for such use (but I STFW only 10 minutes) – Basile Starynkevitch Nov 10 '15 at 14:30
  • 1
    Inspect html generated for http://www.tinymce.com/tryit/basic.php . Will see the actual editing is being done inside iFrame. Look inside class `mce-edit-area` to see the iframe element and the content – charlietfl Nov 10 '15 at 14:42

0 Answers0