Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>From personal experience, I recommend against doing this unless your aim is to provide a very limited amount of functionality. The sheer number of browser differences and the complexity of their workarounds makes this a very tricky and time-consuming task if you want to do it well.</p> <p>If that hasn't put you off, here's my thoughts on your individual questions:</p> <h2>iframe docs vs. contenteditable divs</h2> <p>I recommend the iframe approach, for two main reasons:</p> <ul> <li>You have complete control over the document type, CSS and script within the iframe. This is essential if you want consistent behaviour and appearance and want to use your editor within different pages.</li> <li>Firefox in particular is quite buggy with <code>contenteditable</code> elements, which they only introduced relatively recently (version 3.0) while designMode has existed on documents for many years (since pre-1.0; around 0.6, if memory serves) and works pretty well.</li> </ul> <h2>cross browser styling</h2> <p>If it's important for you to have uniform results from applying styles in different browsers then in general you will need to write your own styling code. However, doing this will break the built-in undo stack and you will need to implement your own undo/redo system.</p> <h2>adding items to the undo chain</h2> <p>There's no programmatic way to interact with the built-in browser undo stack. You'll need to write your own.</p> <p><strong>Update November 2012</strong></p> <p>There is a <a href="http://dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.html">spec in the works</a> for custom undo/redo so this is likely to be possible eventually. Here are the relevant bugs for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=617532">Mozilla</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=87189">WebKit</a>.</p> <h2>keeping the text selection</h2> <p>I have to declare my interests here, since I wrote <a href="http://code.google.com/p/rangy">Rangy</a>. I don't think there's a better library out there that does a similar job; Google Closure does have a range/selection API but I think it uses their own proprietary interface rather than emulating DOM Range and common browser Selection objects. <a href="http://code.google.com/p/ierange">IERange</a> is another library that is similar in idea to Rangy but much less fully realized and seemingly abandoned immediately after release by its author.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload