Trying to make contenteditable work the same between browsers

[Seahorsepip Veteran]

http://jsfiddle.net/827jy7ao/102/
 
Edit: almost finished, it contains some dirty hacks like settimeout but it works how it should in my opinion. Only thing left is text align when a <p> or <li> is not selected(<b> selection as example).
 
Currently trying to make the content editable output the same code for all browsers, tried a million methods, this one seems the best so far.
Next thing I'm adding will be <br><br> to <p> conversion so a white line between two parts of text means a paragraph.
 
Currently contenteditable is a nightmare it seems,
<div> on enter for Chrome
<p> on enter for IE
<br> on enter for firefox
 
So wanted to try making it work the same across all browsers, my cms requires this functionality since the live preview needs to update on every keypress and the live preview html code needs to be the same across all browsers.

[+Zlip792 MVC]

Well, its known thing that contenteditable is PITA. Yet MS does not bother to fix its stuff and neither does Firefox nor Webkit nor Blink.

 

Although as per browserscope.org Rich Text benchmark (although it has many bogus, non standard and proprietary tests).

 

Safari > Chrome > Firefox > IE

 

Why not you go with CK Editor (Free and Open Source) for your CMS? Although licensing could be issue.

 

Firefox meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=contenteditable

 

Microsoft MSDN page: http://msdn2.microsoft.com/en-us/library/ms537837.aspx

 

I'll recommend go through CK Editor source code and see how they fixed particular problems for any bug appeared.

 

Also see Firefox meta bug to find if that particular user case has bug on it and if it is then whether any work around is mentioned on it or not.

[Seahorsepip Veteran]

Well, its known thing that contenteditable is PITA. Yet MS does not bother to fix its stuff and neither does Firefox nor Webkit nor Blink.

 

Although as per browserscope.org Rich Text benchmark (although it has many bogus, non standard and proprietary tests).

 

Safari > Chrome > Firefox > IE

 

Why not you go with CK Editor (Free and Open Source) for your CMS? Although licensing could be issue.

 

Firefox meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=contenteditable

 

Microsoft MSDN page: http://msdn2.microsoft.com/en-us/library/ms537837.aspx

 

I'll recommend go through CK Editor source code and see how they fixed particular problems for any bug appeared.

 

Also see Firefox meta bug to find if that particular user case has bug on it and if it is then whether any work around is mentioned on it or not.

Hmm I'm not going with a third party editor since the live preview and code markup is not how I want with these editors.

 

As example following text:

Howdy,
I'm so happy.

On da earth!

Should in my opinion use the following html:

<p>Howdy,<br>I'm so happy.</p>
<p>On da earth!</p>

But all editors use a wrapper for each line instead of line breaks, and even worse the wrapper they use is a <p> element which isn't a good idea in my opinion since a <p> element should be used for a paragraph and not for a line of text.

 

I got above already working in IE and Chrome(see link in first post), haven't tested it on Firefox.

Edit: seems to work in Firefox too, YAY.

[+Zlip792 MVC]

Hmm I'm not going with a third party editor since the live preview and code markup is not how I want with these editors.

 

As example following text:

Howdy,
I'm so happy.

On da earth!

Should in my opinion use the following html:

<p>Howdy,<br>I'm so happy.</p>
<p>On da earth!</p>

But all editors use a wrapper for each line instead of line breaks, and even worse the wrapper they use is a <p> element which isn't a good idea in my opinion since a <p> element should be used for a paragraph and not for a line of text.

 

I got above already working in IE and Chrome(see link in first post), haven't tested it on Firefox.

Edit: seems to work in chrome too, YAY.

 

Any plan to make editor separate and open source it?

 

Also which browser lowest you are targeting, especially in IE case? Any testing from Safari side?

[Seahorsepip Veteran]

Any plan to make editor separate and open source it?

 

Also which browser lowest you are targeting, especially in IE case? Any testing from Safari side?

It will be seperately available(working on it in jsfiddle so this thread will be updated on each update).

Haven't tested safari but should work the same as Chrome it might add some additional tags which I filter out anyway.

Lowest IE version for now is 9 but might consider 8 depending on the troubles I run into.

[Seahorsepip Veteran]

Update: http://jsfiddle.net/827jy7ao/34/

 

Improved html syntax, <ul> and <li> elements will be put outside the <p> element now according the w3c standard.

Had to use a timeout sadly, I don't know how to callback from leaving a <ul> or <ol> element with the cursor correctly so I had to use the enter key event with a anchor node instead :/

 

Update 2: http://jsfiddle.net/mkznft2d/8/

 

Decided to try adding <br> instead of <p> on enterfor each line, this makes it easier to work with the output.

 

Update 3: http://jsfiddle.net/827jy7ao/35/

Gave up already on <br> insertion on enter, it's too much work and gets messed up too easily.

 

Latest update:

http://jsfiddle.net/827jy7ao/78/

[briley]

Hmm I'm not going with a third party editor since the live preview and code markup is not how I want with these editors.

 

As example following text:

Howdy,
I'm so happy.

On da earth!

Should in my opinion use the following html:

<p>Howdy,<br>I'm so happy.</p>
<p>On da earth!</p>

But all editors use a wrapper for each line instead of line breaks, and even worse the wrapper they use is a <p> element which isn't a good idea in my opinion since a <p> element should be used for a paragraph and not for a line of text.

 

I got above already working in IE and Chrome(see link in first post), haven't tested it on Firefox.

Edit: seems to work in Firefox too, YAY.

 

For what it's worth, most editors I'm aware of (I just tested on CKEditor, tinyMCE, Aloha and Redactor) emulate word processor software: hitting Enter makes a new paragraph, but you can start a new line (<br>) instead by hitting Shift+Enter.

 

Rolling your own editor is a great learning experience, but I'd recommend using an existing editor for a production environment. Editors like CKEditor have already dealt with most of the cross-browser quirks and have developers who sole focus is to continue maintaining the editor and addressing new quirks as they are introduced with new browser versions. Trying to develop and maintain a custom editor with feature parity and stability is an invitation to madness unless you're planning on devoting most of your time to doing it, or your environment is a single browser on a single OS with only the barest of features and isn't ever going to change.

[Seahorsepip Veteran]

For what it's worth, most editors I'm aware of (I just tested on CKEditor, tinyMCE, Aloha and Redactor) emulate word processor software: hitting Enter makes a new paragraph, but you can start a new line (<br>) instead by hitting Shift+Enter.

Rolling your own editor is a great learning experience, but I'd recommend using an existing editor for a production environment. Editors like CKEditor have already dealt with most of the cross-browser quirks and have developers who sole focus is to continue maintaining the editor and addressing new quirks as they are introduced with new browser versions. Trying to develop and maintain a custom editor with feature parity and stability is an invitation to madness unless you're planning on devoting most of your time to doing it, or your environment is a single browser on a single OS with only the barest of features and isn't ever going to change.

I like madness and the impossible. I already got it working on every browser, now I just need to optimize the code.

I don't like making something by using a lot of external libraries :/ Though I don't mind jquery, rangy and other specific js libraries.

I especially make this contenteditable js code because I wanted to make a minimal approach for this problem, so I and anyone else can use it as a minimal basis.

And I hate that behavior in word processors since most people don't know about it and end up writing each line in a paragraph. Also I think a paragraph should be made automatically by just creating a empty line between two parts of text. That's way more realistic since writing on paper is the same.