Develop Reference

Javascript: Pasting text at caret in WYSIWYG editor

I'm still learning the ropes when it comes to JavaScript and one of the issues which is causing me the most problems is understanding the caret position. Currently I'm writing a reference form for a wiki (http://t3chbox.wikia.com/wiki/MediaWiki:Wikia.js/referenceForm.js) and have it working for the source code editor for the wiki, but not the WYSIWYG editor (Visual Editor). I was wondering if anyone here knew how to get the caret position and then paste text for the iframe in which the edit content sits?
The WYSIWYG editor can be seen here: http://t3chbox.wikia.com/wiki/Test?action=edit (edit whilst not logged in for those with Wikia accounts and have Visual set to off). The method I've been using the get the content and attempt to paste at the caret is this:
$(document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentDocument.body).insertAtCaret('hello');
Thanks :)

The jquery insertAtCaret function that you are using only works with textareas and input fields. It does not work with contentEditable elements. You can take a look at this jsfiddle for inserting at caret for contentEditable elements.
function pasteHtmlAtCaret(html,windo) {
windo = windo || window;
var sel, range;
if (windo.getSelection) {
// IE9 and non-IE
sel = windo.getSelection();
console.log(sel);
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
console.log(range);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = windo.document.createElement("div");
el.innerHTML = html;
var frag = windo.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 (windo.document.selection && windo.document.selection.type != "Control") {
// IE < 9
windo.document.selection.createRange().pasteHTML(html);
}
}
//usage
var iframeWindow = document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentWindow;
pasteHtmlAtCaret("Hello World!",iframeWindow);
http://jsfiddle.net/jwvha/534/

Content Editable DIV Clicking/caret Setting

I have a standard content editable div:
<div id="profileBody" class="customInputDiv" contentEditable='true' autocomplete="off"></div>
Basically I want to detect whereabouts the cursor is on a certain event (preferably code that works onclick, keydown or on button).
Something like this:
onkeydown - save caret position within the div, then set caret position.
This sounds slightly silly, but is required because on certain events I will be changing the content slightly and when doing the cursor position changes which is very annoying.
I hate doing questions without examples of what I've tried but if you read previous questions I've always provide what I've tried very detailed, just hit a dead end here!
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
​
Maybe a good way of parsing the data from window.getSelection();?
Found: http://jsfiddle.net/s5xAr/3/ But i dont want the -- just want it to get the caret position using a function and set it e.g.
getCaretPOS();
//do something
setCaretPOS();
This code will set it but getting it seems to be the issue..

To get the caret position, use this function:
function getCaretPosition(editableDiv) {
var caretPos = 0, containerEl = null, sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}
This should work fine for most browsers (leaving IE, of course). You seem to have IE covered with you setCaret function.
That function was from another SO answer. Have a look at the comments as well.
Demo

Insert an HTML element in a contentEditable element

I have a contentEditable div where I want to insert HTML tags (a simple span element).
Is there a cross browser solution that allows me to insert those tags over my div selection or cursor position. If something else is selected on the page (not in the div), I want to append the tag to the end of the div.
Thanks

Here is a kickstart
// get the selection range (or cursor position)
var range = window.getSelection().getRangeAt(0);
// create a span
var newElement = document.createElement('span');
newElement.id = 'myId';
newElement.innerHTML = 'Hello World!';
// if the range is in #myDiv ;)
if(range.startContainer.parentNode.id==='myDiv') {
// delete whatever is on the range
range.deleteContents();
// place your span
range.insertNode(newElement);
}
I don't have IE but works fine on firefox, chrome and safari. Maybe you want to play with range.startContainer to proceed only if the selection is made on the contentEditable div.
EDIT: According to quirksmode range intro you have to change the window.getSelection() part to be IE compatible.
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
userSelection = document.selection.createRange();
}

The following will do this in all major browsers (including IE 6). It will also handle cases where the end of the selection is outside your <div> and cases where the selection is contained within a child (or more deeply nested) element inside the <div>.
2019 addendum: The second branch of insertNodeOverSelection is for IE <= 8 only and could be removed now.
function isOrContainsNode(ancestor, descendant) {
var node = descendant;
while (node) {
if (node === ancestor) return true;
node = node.parentNode;
}
return false;
}
function insertNodeOverSelection(node, containerNode) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
if (isOrContainsNode(containerNode, range.commonAncestorContainer)) {
range.deleteContents();
range.insertNode(node);
} else {
containerNode.appendChild(node);
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (isOrContainsNode(containerNode, range.parentElement())) {
html = (node.nodeType == 3) ? node.data : node.outerHTML;
range.pasteHTML(html);
} else {
containerNode.appendChild(node);
}
}
}
<input type="button" onmousedown="insertNodeOverSelection(document.createTextNode('[NODE]'), document.getElementById('test'));" value="insert">
<div contenteditable="true">
<div id="test" style="background-color: lightgoldenrodyellow">
This is the editable element where the insertion will happen. Select something or place the cursor in here, then hit the button above
</div>
<div>
No insertion will happen here
</div>
</div>

Javascript: how to un-surroundContents range

This function uses the range object to return user selection and wrap it in bold tags. is there a method that allows me to remove the tags? As in <b>text<b> = text.
I actually need a toggle function that wraps the selection in tags & un-wraps it if already contains tags. Similar to what text editors do when you toggle the bold button.
if "text" then "<b>text</b>"
else "<b>text</b>" then "text"
...
function makeBold() {
//create variable from selection
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0).cloneRange();
var newNode = document.createElement("b");
//wrap selection in tags
range.surroundContents(newNode);
//return the user selection
selection.removeAllRanges();
selection.addRange(range);
}
}

I didn't mention this in your previous question about this because it sounded like you wanted a generic means of surrounding a range within an element, but for this particular application (i.e. bolding/unbolding text), and assuming you don't mind a little cross-browser variation in the precise tags used (<strong> versus <bold> versus possibly <span style="font-weight: bold">), you're best off using document.execCommand(), which will toggle boldness:
function toggleBold() {
document.execCommand("bold", false, null);
}
This will work in all browsers when the selected content is editable, and even when it's not editable in IE. If you need it to work on non-editable content in other browsers, you'll need to temporarily make the document editable:
function toggleBold() {
var range, sel;
if (window.getSelection) {
// Non-IE case
sel = window.getSelection();
if (sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
document.execCommand("bold", false, null);
document.designMode = "off";
} else if (document.selection && document.selection.createRange &&
document.selection.type != "None") {
// IE case
range = document.selection.createRange();
range.execCommand("bold", false, null);
}
}

wrapping & un-wrapping the text selection using the same button click event handler:
boldBtn.addEventListener('click', () => {
let selection = document.getSelection();
const isAllowedContainer = selection.baseNode.parentElement?.closest?.('#editor');
// do not continue if no text selection or this is not the desired element container
if( selection.rangeCount < 1 || !isAllowedContainer ) return;
const range = selection.getRangeAt(0);
const selParent = selection.anchorNode?.parentElement;
const selectedElem = selParent?.nodeType == 1 && selParent?.children.length < 2 && selParent;
// un-wrap
if(selectedElem.tagName === 'B') {
selectedElem.replaceWith(...selectedElem.childNodes)
}
// wrap with <b>
else {
range.surroundContents(document.createElement("b"));
selection.removeAllRanges();
selection.addRange(range);
range.collapse(); // removes selected and places caret at the end of the injected node
}
})
<button id="boldBtn">B</button><br/><br/>
<div id='editor' contenteditable="true">Select some text and click the button</div>

Insert HTML after a selection

I want to be able to double-click to select some text in a div, which then triggers a JavaScript function that inserts some HTML after the selected text, much like the 'edit/reply' feature in Google Wave.
I have already established how to trigger a function on double-clicking, it is locating the selection and subsequently inserting HTML after it that is the problem.

The following function will insert a DOM node (element or text node) at the end of the selection in all major browsers (note that Firefox now allows multiple selections by default; the following uses only the first selection):
function insertNodeAfterSelection(node) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.collapse(false);
html = (node.nodeType == 3) ? node.data : node.outerHTML;
range.pasteHTML(html);
}
}
If you would rather insert an HTML string:
function insertHtmlAfterSelection(html) {
var sel, range, node;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = window.getSelection().getRangeAt(0);
range.collapse(false);
// 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);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.collapse(false);
range.pasteHTML(html);
}
}
Update 18 January 2012
Finally, here's a version that inserts HTML and preserves the selection (i.e. expands the selection to include the originally selected content plus the inserted content).
Live demo: http://jsfiddle.net/timdown/JPb75/1/
Code:
function insertHtmlAfterSelection(html) {
var sel, range, expandedSelRange, node;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = window.getSelection().getRangeAt(0);
expandedSelRange = range.cloneRange();
range.collapse(false);
// 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) {
expandedSelRange.setEndAfter(lastNode);
sel.removeAllRanges();
sel.addRange(expandedSelRange);
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
expandedSelRange = range.duplicate();
range.collapse(false);
range.pasteHTML(html);
expandedSelRange.setEndPoint("EndToEnd", range);
expandedSelRange.select();
}
}

window.getSelection() will get you the selected text (Documentation).
You can use the jQuery.after() (Documentation) to insert new html after an element.
On your selected text function call you will have to loop through all your DOM elements checking their x&y positions to the current cursor position - get the closest element and insert after or use the function .elementFromPoint(x,y) (Documentation)
This is the best way I can currently think of. It's not perfect, but it is somewhere to start.

I don't know if it is possible, but I though of a partial solution.
On your double click event you can get the event object and access the property target.
Having the target element, you can get the selected text.
Now get the target element html and find the index of the selected text and it's length, inject your html on the index + length position.
I think you already saw the problem, it could match the text in multiple places. To solve it you might have to find the position of the cursor and compare to the element, I don't know how to do that...
Hope I could help a bit.