Hello
While discussing about contenteditable elements, the WYSIWYG aspect was
mentioned. For real WYSIWYG in a text editor of a CMS, Blog, Forum or
whatever, it would be necessary for the contents of the contenteditable
element to:
- Disable the styles of the surrounding page
- Enable the styles of the target page
This could be solved with a @content-style attribute which takes a URL
pointing to an external stylesheet document. If the attribute is
present, all styles of the surrounding page are ignored, and the styles
of the linked CSS document are applied to the content of the element.
Special cases:
- If the linked CSS document contains declarations for the body element,
they are applied to the contenteditable element itself. (This could be
necessary in case of light text on dark backgrounds, where you want to
apply the background to the contenteditable area.)
- If there are conflicts between body element styles in the linked
stylesheet and the styles of the contenteditable element in the
surrounding page, the latter win. (This is necessary to keep the
dimensions of the input UI, if an author links the whole CSS of the
target page.)
Rationale:
- In today's iframe-based online rich text editors, it is common to
apply the styles of the target page of the edited text to the source
document of the iframe. This is not possible in a <div contenteditable>.
- For many use cases, such as forum and blog entries, or non-fullpage
oriented web content management systems, <div contenteditable> is easier
to implement than iframe-based editors. The only downside is the WYSIWYG
issue.
I'd be happy to read some comments on this idea!
