StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The best what I was able to workout without Javascript was</p> <p>HTML:</p> <pre><code><div contenteditable="true"> <div>asdfasdf</div> </div> </code></pre> <p>LESS:</p> <pre><code>div[contenteditable=true] { outline: none; &>p, &>div { margin: 0 0 0 30px; display: list-item; } } </code></pre> <p>bin <a href="http://jsbin.com/idekix/6/edit" rel="nofollow">http://jsbin.com/idekix/6/edit</a></p> <p>But there is some drawbacks here,</p> <ol> <li><p>the first and very big, FireFox 18.0.1 on Win8 instead inserting the <code>div</code> or <code>p</code> tags as a new line uses something like double <code>br</code>, </p></li> <li><p>the second happened when you remove everything and starting type and hit enter, different browsers behavior very differently, Chrome insert very first line as a just text node of <code>contenteditable</code> container, and than put every new line into <code>div</code>, Opera 12.12 handle it better, and it never allows remove last <code>div</code> node, IE9-10 starting jump around and after you started again uses <code>p</code> tags instead of <code>div</code> (that's not even such a disaster, just inconsistency), but yet the FireFox is not yet even trying to change it's <code>br</code> behavior. Also trying to checkout IE7-8 with IE10 debug mode and it is the same as Opera has, though it is not real browsers.</p></li> <li><p>the third that it allows you insert empty nodes, speaking of this the good job done by Opera, see this bin in Opera <a href="http://jsbin.com/uxesez/1/edit" rel="nofollow">http://jsbin.com/uxesez/1/edit</a>, the markup is more close to original here, and it does not allow you insert empty <code>li</code>.</p></li> </ol> <p>That's said, all tests where done on Windows 8 64bit platform, with Chrome 24.0.1312.56 m, FireFox 18.0.1, Opera 12.12 and IE10 with emulating older IEs by IE debug bar. Admit that on other platforms/versions things could be different.</p> <p>Summarize all the above, <code>contenteditable</code> has very good browser support range <a href="http://caniuse.com/contenteditable" rel="nofollow">http://caniuse.com/contenteditable</a>, but yet every browser has own implementation, that's another separate question why. So without crossbrowser JavaScrpt hassle you could not use it around. Also as my personal opinion <code>contenteditable</code> core idea more suitable like lightweight replacement of <code>iframe</code> when it uses as element of almost every rich text editor in browser.</p> <p>UPD from Mozilla source <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" rel="nofollow">https://developer.mozilla.org/en-US/docs/HTML/Content_Editable</a></p> <blockquote> <p>In HTML5 any element can be editable. This feature was introduced a long time ago, but has now been standardized by WHATWG (html current spec). With some JavaScript event handlers you can transform your web page into a full and fast <strong>rich-text editor</strong>.</p> </blockquote> <p>Next step is just my humble suggestion. Much handy in your case, as my opinion, would be using real editable fields instead. The very much prototype version I did into this bin <a href="http://jsbin.com/ojiyok/7/edit" rel="nofollow">http://jsbin.com/ojiyok/7/edit</a> there is still things for improvement but looks like it has more predictable behavior than real <code>conteneditables</code>, and good part here you could change UI according your needs in all browsers at once. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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