[whatwg] Proposal: content-style attribute for contenteditable elements

[Aryeh Gregor]

On Tue, May 17, 2011 at 4:09 AM, Markus Ernst <derernst at gmx.ch> wrote:
> 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

Commonly these are the same, or close to it.  Just serve the same
stylesheet and apply the same classes or whatever to the
contenteditable region as to the final <div>/<article>/etc.  In the
cases where the styles are really different, it should be fine to
require authors to use an iframe.

> 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.

It's not much harder to use an <iframe>.  You can just set it up with
no src and use JavaScript to set .contentDocument.body to whatever
you'd have set your contenteditable element to.  You don't have to
make it actually load a separate page.  (Although browsers might not
save the contents over browser crash/etc. if script sets the contents
when the page loads.  You could work around it in a few lines by
saving to localStorage or sessionStorage regularly, which is a handy
feature anyway.)

On Tue, May 17, 2011 at 11:23 AM, Tab Atkins Jr. <jackalmage at gmail.com> wrote:
> Why not just use an <iframe> with a contenteditable inside the linked
> page?  This also gives you the ability to link in arbitrary CSS and be
> shielded from the outside page's CSS, and as long as the linked page
> is same-origin, you can still fiddle with it from script in the outer
> page.

If you're using an iframe, it makes more sense to use designMode than
contenteditable.