13

When creating a cross-browser rich text editor. Which would you use and why?

Keep in mind that pasting has to be resilient to stand against multiple sources (notepad, word, other websites) and it should not be dependent on any Javascript libraries.

Gary
  • 1,001
  • 8
  • 17

1 Answers1

14

You probably want contentEditable. designMode applies to the document, contentEditable to a specific element and its children.

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Jerod Venema
  • 44,124
  • 5
  • 66
  • 109
  • 3
    ... and neither of them are a satisfactory solution at this time. I've sort of given up on so called rich-text editing (which I just assume to be a synonym for WYSIWYG editors) and stuck to Markdown. – Yi Jiang Aug 18 '10 at 15:25
  • @Yi Jiang - I did find some resources on MarkDown but the editing part looks like a form of "wiki" format, which will not be suitable for our users. Do you have an example of a MarkDown WYSIWYG editor that does on-the-fly conversion as the user edits? – Gary Aug 18 '10 at 15:42
  • 3
    Isn't RTE encapsulated by an iFrame which makes the rich text editor a 'document'? If that's the case then wouldn't contentEditable and designMode actually the same thing in the context of which it applies to? – Gary Aug 18 '10 at 15:48
  • If you're using an iframe, I'd assume you're correct; never having implemented a RTE completely myself, I'm not sure though. – Jerod Venema Aug 18 '10 at 18:37
  • From your article, I found some more info relating that contentEditable attribute and that we're not going need to use iFrame anymore. html5demos.com/contenteditable w3.org/TR/html5/editing.html#contenteditable This blog helped also: http://nagoon97.wordpress.com/2008/04/20/differences-between-designmode-and-contenteditable/ Thanks. – Gary Aug 19 '10 at 14:32
  • 2
    In cases where you wish to have a mixture of editable and non-editable content on a document, such as a template document where certain parts are to be locked, then you will need to use contentEditable="true" on the document level, and contentEditable="true" or "false" on each element within. If you apply designMode to the document, then browsers tend to ignore the settings of contentEditable on elements within it and the whole document can be edited. – Peter Brand Feb 04 '16 at 14:01