Develop Reference

Cross-browser way to insert BR or P tag when hitting Enter on a contentEditable element

When you hit Enter on a contentEditable element every browser is handling the resulting code differently: Firefox inserts a BR tag, Chrome inserts a DIV tag while Internet Explorer inserts a P tag.
I was desperately looking for a solution to at least use a BR or P for all browsers and the most common answer was this:
inserting BR tag :
$("#editableElement").on("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
But this doesn't work because it seems that browsers don't know how to set the caret after <br> which means the following is not doing anything useful (especially if you hit enter when the caret is placed at the end of text):
range.setStartAfter(br);
range.setEndAfter(br);
Some people would say: use double <br><br> but this results in two line breaks when you hit enter inside a text node.
Others would say always add an additional <br> at the end of contentEditable, but if you have a <div contenteditable><p>text here</p></div> and you place the cursor at the end of text then hit enter, you will get the wrong behavior.
So I said to myself maybe we can use P instead of BR, and the common answer is:
inserting P tag:
document.execCommand('formatBlock', false, 'p');
But this doesn't work consistently either.
As you can see, all these solutions leave something to be desired. Is there another solution that solves this issue?

One possible solution: append a text node with a zero-width space character after the <br> element. This is a non-printing zero-width character that's specifically designed to:
...indicate word boundaries to text processing systems when using scripts
that do not use explicit spacing, or after characters (such as the
slash) that are not followed by a visible space but after which there
may nevertheless be a line break.
(Wikipedia)
Tested in Chrome 48, Firefox 43, and IE11.
$("#editableElement").on("keypress", function(e) {
//if the last character is a zero-width space, remove it
var contentEditableHTML = $("#editableElement").html();
var lastCharCode = contentEditableHTML.charCodeAt(contentEditableHTML.length - 1);
if (lastCharCode == 8203) {
$("#editableElement").html(contentEditableHTML.slice(0, -1));
}
// handle "Enter" keypress
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var br = document.createElement("br");
var zwsp = document.createTextNode("\u200B");
var textNodeParent = document.getSelection().anchorNode.parentNode;
var inSpan = textNodeParent.nodeName == "SPAN";
var span = document.createElement("span");
// if the carat is inside a <span>, move it out of the <span> tag
if (inSpan) {
range.setStartAfter(textNodeParent);
range.setEndAfter(textNodeParent);
}
// insert the <br>
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
// create a new span on the next line
if (inSpan) {
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 0);
}
// add a zero-width character
range.insertNode(zwsp);
range.setStartBefore(zwsp);
range.setEndBefore(zwsp);
// insert the new range
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
#editableElement {
height: 150px;
width: 500px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable=true id="editableElement">
<span>sample text</span>
</div>

You can see a full cross browser implementation here. There are so many hacks to make it work. This code from the link would help you to device a solution.
Example of a Geko and IE hack:
doc.createElement( 'br' ).insertAfter( startBlock );
// A text node is required by Gecko only to make the cursor blink.
if ( CKEDITOR.env.gecko )
doc.createText( '' ).insertAfter( startBlock );
// IE has different behaviors regarding position.
range.setStartAt( startBlock.getNext(),
CKEDITOR.env.ie ? CKEDITOR.POSITION_BEFORE_START :
CKEDITOR.POSITION_AFTER_START );

Is there a way to not lose focus selection when replacing HTML with text in an contenteditable div?

I have a div tag that I make editable.
I do not want any HTML in that tag so I do not let users enter any. However, when the user does a copy / paste, it is not unlikely to include tags.
I have some jQuery code to capture the paste event and just in case I tried using my saveSelection() and restoreSelection() functions which I show below which work find in many situations but here they fail...
Fiddle: http://jsfiddle.net/9wm0oeah/2/
jQuery("#that_div").on("paste", function()
{
setTimeout(function()
{
// remove any HTML
var selection = saveSelection();
jQuery("#that_div").text(jQuery("#that_div").text());
restoreSelection(selection);
}, 0);
});
function saveSelection()
{
var sel;
if(document.selection)
{
return document.selection.createRange();
}
else
{
sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount > 0)
{
return sel.getRangeAt(0);
}
else
{
return null;
}
}
//NOTREACHED
}
function restoreSelection(range)
{
var sel;
if(document.selection)
{
range.select();
}
else
{
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange((range));
}
}
Do you have any idea why it fails?

When you change the DOM nodes inside your editable div, any range exists within or partially within that div has to change to accommodate the changes. If you completely replace the content, as your code does, the nodes that the range's boundaries were relative to are destroyed and the range has to revert to a default state.
You could use a character offset-based solution instead. For example: Can't restore selection after HTML modify, even if it's the same HTML

contenteditable div issue when restore/saving selection

I have a div (#recommendTextArea) which is editable, in which that I try to modify the innerHTML of this div when a user clicks on a list (this is called .display_box), the function looks like this. Basically it appends a span to the innerHTML of the div and then it hides the friendList, upon hiding it also tries to restoreTheSelection and before appending the extra span I called saveSelection.
$(".display_box").live("click",function()
{
selRange = saveSelection();
console.log(selRange);
var username = $(this).attr('title');
var old = $("#recommendTextArea").html();
var content = old.replace(word, " "); //replacing #abc to (" ") space
var E ="<span contenteditable='false'>"+ username + "</span> ";
content = [content.slice(0, start), E, content.slice(start)].join('');
$("#recommendTextArea").html(content);
$("#friendsList").hide(function(){
restoreSelection(selRange);
});
});
I have the following function to restore and save selection:
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
However this doesn't work as expected, the cursor is no where to be seen when I click on an item. What am I doing wrong here?

You have a few issues:
1) Timing: the "click" event is way too late to grab selection (ALWAYS debug this, it's super easy to see the editable DIV has long lost focus and selection by that time). Use "mousedown" instead.
2) You can't store selection range like this - changing the selection context (in your case the innerHTML of the commonAncestorContainer) will wipe that range (for some reason even cloned range objects get wiped for me). If you manage to get a copy (via jQuery.extend for example) it will become invalid because the text node inside is not guaranteed to remain the same. My best guess is to go with storing start/end offset and if needed the related nodes as required by the range. Restore the range properties after the HTML is modified.
3) As with 1) focus is crucial to maintain selection, so that click on the list.. make sure you prevent the default before exiting the handler so focus and you new selection will remain in the DIV.
Can't figure out the exact use case from your code but this is my test sample and you can adjust from here as needed: http://jsfiddle.net/damyanpetev/KWDf6/

In contenteditable how do you add a paragraph after blockquote on Enter key press?

I have the following problem. Once I add a blockquote in contenteditable, by pressing Enter key it moves to a new line and adds another blockquote element. It goes on forever, and I can’t escape the formatting. The desired functionality would be that of the unordered list. When you press the Enter key it adds a new empty <li> element, but if you press Enter again, it escapes the formatting, removes the previously created <li> and adds a <p>.
Check out the demo: http://jsfiddle.net/wa9pM/
One hack I found was to create an empty <p> under the blockquote, before you create a blockquote. But is there a way to break this formatting behaviour with JavaScript? No idea how I would check: if where the cursor is, it’s the end of the line and if it’s a blockquote and on Enter key press, don’t add a new blockquote.
I’m using this code to generate a blockquote in JS:
document.execCommand('formatBlock', false, 'blockquote');

While creating a rich text editor for an iOS application i faced the same problem. Every time i've inserted a <blockquote> tag in my text field and pressed Enter, it was impossible to get rid off the block-quote.
After researching a bit, i've found a working solution.
Finding inner HTML tags:
function whichTag(tagName){
var sel, containerNode;
var tagFound = false;
tagName = tagName.toUpperCase();
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
containerNode = sel.getRangeAt(0).commonAncestorContainer;
}
}else if( (sel = document.selection) && sel.type != "Control" ) {
containerNode = sel.createRange().parentElement();
}
while (containerNode) {
if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {
tagFound = true;
containerNode = null;
}else{
containerNode = containerNode.parentNode;
}
}
return tagFound;
}
Checking for occurrences of the block-quote tag:
function checkBlockquote(){
var input = document.getElementById('text_field_id');
input.onkeydown = function() {
var key = event.keyCode || event.charCode;
if( key == 13){
if (whichTag("blockquote")){
document.execCommand('InsertParagraph');
document.execCommand('Outdent');
}
}
};
}
Triggering the key down events:
<body onLoad="checkBlockquote();">
<!-- stuff... -->
</body>
I believe the code above can be adjusted to fit your needs easily. If you need further help, feel free to ask.

Something like this did the work for me (at least on Chrome and Safari).
Demo at http://jsfiddle.net/XLPrw/
$("[contenteditable]").on("keypress", function(e) {
var range = window.getSelection().getRangeAt();
var element = range.commonAncestorContainer;
if(element.nodeName == "BLOCKQUOTE") {
element.parentElement.removeChild(element);
}
});
Didn't make any extensive test, but it looks like range.commonAncestorElement returns the current textnode in case the blockquote contains text, or the blockquote element itself in case it contains no textnode (on Chrome, a <br> is added and caret is positioned after it). You can remove the newly created blockquote in this case. Anyway, after deleting the element the caret looks like getting positioned somewhere upon the contenteditable, although typing confirms that it's right after the original blackquote.
Hope this points you to a more conclusive solution.

Super late answer, but this was a much simpler solution for me. Hopefully it helps anyone else looking. Browser compatibility may vary.
YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
if (e.which || e.keyCode === 13) {
if (document.queryCommandValue('formatBlock') === 'blockquote') {
exec('formatBlock', '<P>')
}
}
})

Tag few words from text

We have a HTML page. Is it possible to select (by mouse) few words of a paragraph, get reference to those selected words and encapsulate them, say, by the <span>...</span> tag programatically? We can use jQuery or HTML5/CSS3?

You can use a mouseup handler and use getSelection. Say you have a div called testtagging, then this is a way to add a span to a selected text within that div. See this jsfiddle.
$('#testtagging').on('mouseup',tag);
function tag(e){
tagSelection('<span style="color:red">$1</span>');
}
function tagSelection(html) {
var range, node;
if (document.selection && document.selection.createRange) {
//IE
range = document.selection.createRange();
range.pasteHTML(html.replace(/\$1/,range.text));
return true;
}
if (window.getSelection && window.getSelection().getRangeAt) {
//other browsers
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(
html.replace(/\$1/,range.toString())
);
range.deleteContents();
range.insertNode(node);
}
return true;
}​
[edit] adjusted for use with IE too. JsFiddle is also adapted

JSFiddle working example
Propose to wrap all paragraph words into span elements:
var r = /(\S+)/ig;
var text = $("p").text();
$("p").html(text.replace(r, "<span class='w'>$1</span>"));
Then bind hover/click events:
$("p > .w").on("hover", function()
{
$(this).toggleClass("hover");
})
.on("click", function()
{
$(this).toggleClass("selected");
});
If you want to parse words from selected text range, you should use window.getSelection().
Refer to this question or ask me to adapt this code.