Develop Reference

Insert span-node and continue writing

I have a problem adding nodes to a editable div.
I want to add highlighted text in a span and after that the cursor should be outside the added span.
Right now the cursor is inside the added span.
I have created a Fiddle to demonstrate it:
http://jsfiddle.net/4N4ZD/633/
Here is some code:
function insertNodeAtCaret() {
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
var span = document.createElement('span');
span.innerHTML = 'TEXT';
span.style.background = 'yellow';
range.insertNode(span);
range = range.cloneRange();
range.selectNodeContents(span);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
}
}

Found a solution. Here is a fiddle: http://jsfiddle.net/4N4ZD/638/
The trick is to add a new text-span and use the methode 'setStartAfter' like so:
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var span = document.createElement('span');
span.innerHTML = 'TEXT';
span.style.background = 'yellow';
range.insertNode(span);
var textNode = document.createTextNode('\u00A0');
range.setStartAfter(span);
range.insertNode(textNode);
range.setStartAfter(textNode);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

Edit and Select Text using jQuery

I have a text field which can be edited using click and i am doing it in jQuery.
Now i was wondering how can i select all the text in box when i click EDIT button
Fiddle Link
Code for edit
$('.edit').click(function () {
$(this).siblings('.edit-section').attr('contenteditable', 'true');
$(this).siblings('.edit-section').attr('style', 'border:2px solid;');
$(this).attr('style', 'display:none;');
$(this).siblings('.done').attr('style', 'display:li;');
});
I cannot add separate click function for .edit-section

Try,
$('.edit,.done').click(function () {
var section = $(this).siblings('.edit-section');
var isEdit = $(this).is('.edit');
section.prop('contenteditable',isEdit).css('border',isEdit?"2px solid":"none");
$('.edit').toggle(!isEdit);
$('.done').toggle(isEdit);
if(isEdit){section.focus(); document.execCommand('selectAll',false,null); }
});
DEMO
Source

Demo
jQuery.fn.selectText = function () {
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$(".edit").click(function () {
$(".edit-section").selectText();
});
from : Selecting text in an element (akin to highlighting with your mouse)

Possible duplicate - Programmatically select text in a contenteditable HTML element?
Copied following function from the answer.
function selectElementContents(el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
var el = document.getElementById("foo");
selectElementContents(el);
Updated JS-Fiddle - http://jsfiddle.net/vishwanatharondekar/zSwBL/5/

Try
jQuery.fn.selectText = function(){
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$("button").click(function() {
$("#editable").selectText();
});
JSFiddle
Refence: How to select all text in contenteditable div?

How to insert new <div> on a button click at the cursor position of existing <div>

this.$el.find('#divname').append(newDivHtml) will append to the newDivHTML to existing div. However, I was looking at this scenario:
On the existing div1 user edits some free text and clicks a button
on click of the button, a popupview shows up a list of options.
selecting one option inserts the newDivHtml into the cursor position of underlaying div1.
I tried: http://jsfiddle.net/jwvha/1/
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
2. doesn't seems to work for that.$e1.find('#sectionContentSimple').insertAdjacentHTML(100, newhtml);

Just a thought without delving into the code too deeply, have you tried saving the clicked element to a variable so that you can access it later, rather than relying on it retaining focus?

set cursor between 2 letters in contenteditable

How do I set the cursor between the a and the b below?
<div contenteditable = true id = "test">
abcdefg
</div>
I have tried to play with ranges, but nothing is working for me. The below code selects the entire text, and there is no cursor. (This code is for Chrome)
sel = window.getSelection();
range = document.createRange();
node = document.getElementById("test");
range.setStart(node, 0);
range.setEnd(node, 1);
sel.addRange(range);

This should work:
function setSelectionRange(aNode, aOffset) {
aNode.focus();
var sel = window.getSelection(),
range = sel.getRangeAt(0);
range.collapse(true);
range.setStart(aNode.childNodes[0], aOffset),
sel.removeAllRanges();
sel.addRange(range);
}
setSelectionRange(document.getElementById("test"), 1);
http://jsfiddle.net/5a9uD/1/
If you look to MDN documentation https://developer.mozilla.org/en-US/docs/Web/API/range.setStart you will see that this interface use a node not an element.

Positioning cursor after inserted word

I want to position a cursor after an inserted word (test), in textarea.
The insertion of the word can be in any position in textarea.
(Internet Explorer)
This is my script:
document.activeElement.focus();
document.selection.createRange().text = "test";
var sel = document.selection.createRange();
sel.moveStart('character', -document.activeElement.value.length);
var cursorPos = sel.text.length;
var range = this.textarea.createTextRange();
range.collapse(true);
range.moveEnd('character', cursorPos);
range.moveStart('character', cursorPos);
range.select();

This will do it (in Internet Explorer only, you'll need a totally different approach for other browsers):
document.activeElement.focus();
var sel = document.selection.createRange();
sel.text = "test";
sel.collapse(false);
sel.select();