HTML5 content Editable paragraph after list

Question

I am using Google Chrome.

I need to have a very small HTML editor and I found Simple Edit . Very small editor, just for my needs. However ... This and many other editors using Content Editable have one common problem.

Problem

After creating the list (double-click twice in the last element of the list), it creates a new div. I was supposed to create a new paragraph tag.

References

• Try the editor here: http://files.inlovewithcss.com/simple-edit/
• Take a look at the tiny source code: https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

Question

What is the proper way to prevent divs and add paragraph tags after the list instead?

Answer 1

The answer, written by Brian Allo, does not take into account that you need to place the cursor at the end of the div. Otherwise, with each replacement action, the user will have to press CTRL-End.

This solution that I propose can also be seen in action http://jsfiddle.net/82dS6/ :

function setEndOfContenteditable(contentEditableElement){ // Taken from http://stackoverflow.com/a/3866442/1601088 var range,selection; if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+ range = document.createRange(); range.selectNodeContents(contentEditableElement); range.collapse(false); selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } else if(document.selection){//IE 8 and lower range = document.body.createTextRange(); range.moveToElementText(contentEditableElement); range.collapse(false); range.select(); } } function replaceDivWithP(el){ $(el).find('div').each(function(){ $(this).replaceWith($('<p>' + $(this).html() + '</p>')); }); } $(function(){ $(".text").simpleEdit(); }); $('.textarea').bind('keyup', function(){ replaceDivWithP(this); setEndOfContenteditable(this); }); ​ 

Answer 2

Instead of processing on the fly with each keyup event keyup you can consider post-processing:

 $('.textarea').bind('blur', function(){ $('.textarea div').contents().unwrap().wrap('<p/>'); }); 

Fiddle: http://jsfiddle.net/thNUS/4/

Answer 3

The quick fix is ​​to simply replace any DIV with Ps. Put this in your div editing content.

 onkeyup="this.innerHTML=this.innerHTML.replace('div','p')" 

Hope this helps. Good luck.

Answer 4

The best I could come up with was to use formatblock , which has compatibility issues . Basically, you could add another link:

 textcontainer.prepend("<button class='paragraph'>p</button>"); 

...

 $(".paragraph").live("click", function(){ document.execCommand('formatblock', false, "p"); }); 

This gives your users the ability to insert a paragraph tag. Getting out of this tag is a bit tricky, so it has some usability issues. You can play with him on the attached demo:

Demo : http://jsbin.com/ovexiz/1
Source : http://jsbin.com/ovexiz/1/edit

* note that the paragraphs are green.

Answer 5

Previous answers suggested a keyup or blur solution. This uses the click event of the list button to minimize the number of function calls:

http://jsfiddle.net/9ZAL7/ :

 function replaceDivWithP(el){ $(el).find('div').each(function(){ $(this).replaceWith($('<p>' + $(this).html() + '</p>')); }); } $(function(){ $(".text").simpleEdit(); }); $('button.list').bind('click', function(){ replaceDivWithP($('.textarea')); });​