
Editors and iframes - jhchen
http://www.jasonchen.me/editors-and-iframes/
======
marknadal
I have done extensive research in this area as well - my code is used in
production by 100,000 users, by another company. I personally always choose to
go with direct contentEditable without an iframe. It makes things much easier.

However, what the author did not mention was security. My assumption as to why
the company that uses my code, still uses it inside an iframe, is to prevent
accidental XSS injection from when their user's copy and paste content
(sometimes with javascript embedded in it) into the editor. So be careful
about that.

Another recommendation I have, is to NOT use execCommand.

~~~
dood
Why not use execCommand?

~~~
teleclimber
I haven't used execCommand in a while but I think it adds a bunch of font
tags. Also different browsers will use different tags for "bold" for example
(<b> vs <em>) leading to inconsistent markup. Easier to just decide the tags
and insert them yourself.

------
matthewborden
I built a demo, for a rich text editor, for fastmail.fm. The editor is called
Squire ([http://neilj.github.io/Squire/](http://neilj.github.io/Squire/)) and
designed for essays, emails, longforms ect. Squire uses contenteditable within
an iframe. However, the editor replaces all the functionality of content
editable to create a higher level of compatibility across browsers.

Thanks for your article, I really enjoyed it. Matt
([http://www.matthewbordenweb.com/](http://www.matthewbordenweb.com/))

------
DougBTX
I wonder what he thinks of eg, [https://medium.com/medium-eng/why-
contenteditable-is-terribl...](https://medium.com/medium-eng/why-
contenteditable-is-terrible-122d8a40e480)

------
jdkanani
I couldn't find any good editor without iframe which provides delta save +
content versioning. So I built one - Smalleditor
([http://jdkanani.github.io/smalleditor](http://jdkanani.github.io/smalleditor))
- it is similar to Medium's editor but with contenteditable.

------
aleem
> The most discussed benefit of iframes is separation from other styles and
> scripts on the web page.

I would love to hear your plans to overcome this as it is pretty much a hard
requirement for any editor integration.

I have run into this and was quite hopeful about <style scoped> but browser
support leaves much to be desired.

~~~
theallan
I was wondering this as well - would be interested in the answer.

Years since I've really dabbled in WYSIWYG editing JS, but the best I can
think of us to use a reset CSS file namespaced for the `div` (or whatever
container) in question.

~~~
aleem
Yup that's more or less the only way I have seen in the wild.

The Scoped Polyfill [https://github.com/PM5544/scoped-
polyfill](https://github.com/PM5544/scoped-polyfill) does just this and gets
you most of the way there.

> It does so by prepending the styleRules selectorText with id's

------
kilian
I got to choose which text editor we implemented in a large project a while
ago and we ended with Quill, because of its easy customisation and contained
feature set. The latter was a bonus for us, as we had to do much less checking
for users adding breaking code to the page.

I do not envy rich text editor authors one bit. Even implementing them has an
unreasonable amount of gotcha's when you dive into getting your page and the
iframe/editor to communicate effectively.

------
dood
I'm looking for a simple text editor for a side project. I hacked something
together with contenteditable, but am quite frustrated with it for various
reasons.

Recommendation for a simple text editor that doesn't get in the user's way?

~~~
throwaway20148
Try looking into Scribe. They describe it as:

> A rich text editor framework for the web platform, with patches for browser
> inconsistencies and sensible defaults.

[https://github.com/guardian/scribe](https://github.com/guardian/scribe)

------
pluma
I wished there was a good RTE implementation that supported custom classes but
still worked with undo/redo like content-editable.

------
TheLoneWolfling
And... Yet another website that refuses to display plain text without JS.
Progressive enhancement. It's not rocket science.

~~~
aikah
The page doesn't even seem to be loading content via Ajax.So it's likely the
content is hidden with Css when the page loads, to make that fade-in effect. I
think it's silly,the effect is totally unnecessary.

