We Keep Coding

A problem with javascript Range: deleteContents doesn't do anything at all

I am trying to delete a node from a contentEditable div, but nothing happens on range.deleteContents():
var parseLine = function(){
var el = document.getElementById('Editor');
var selection = window.getSelection();
let text = $(selection.anchorNode)[0].data;
var range = selection.getRangeAt(0);
range.deleteContents();
};
Upd.
The EditorName is a var with the id of the editor. For simplicity, I updated the code to use the name directly.
Here is the html:
<div id="wrapper">
<main data-ng-controller="HomeCtrl as HomeCtrl">
<div id="Editor" contenteditable="true"></div>
</main>
<div id="PushFooter"></div>
</div>
Fiddle: https://jsfiddle.net/720fg8ne/
Expected behaviour would be: typing in text->pressing tab-> the text should disappear

Second line of your javascript code is wrong, editorName must be a string:
var el = document.getElementById('EditorName');
Text variable looks like a mix of vanilla js and jQuery, I fix it here:
let text = selection.anchorNode.data;
All code fixed:
var parseLine = function() {
var el = document.getElementById('EditorName');
var selection = window.getSelection();
let text = selection.anchorNode.data;
var range = selection.getRangeAt(0);
range.deleteContents();
};

selection.toString() returns empty string despite of a selected range

I am trying to select an element's text on click using the following code:
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
Although the text is getting highlighted, empty string is copied to the clipboard on using Ctrl + C. Checking for selection.toString() returns an empty string too. Any idea why can this be happening?

Hm, I took a look at your code and tried:
var selection = window.getSelection();
var selectionText = selection.anchorNode.textContent
and I got the selected text content.
EDIT: it appears this was wrapped in a click function...one second.
$('<your selector goes here>').click(function(e) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(e.target);
selection.removeAllRanges();
selection.addRange(range);
console.dir(selection.anchorNode.textContent);
//text content should display...
//now that the content is highlighted, you can copy it
document.execCommand('copy');
})

Range text selection with html tags

I have issue with range selection, i saw some of the ans in stack over flow, I tried some thing, is not working.
The issue
The text is like below which will have the text with html tags
Test
The function should select only the text in side the html tags
I tried following but it is not working
function makeSelection() {
var start = 3;
var end = 9;
var child = 2;
var parent = document.getElementById('data');
var range = document.createRange();
range.setStart(parent.childNodes[child], start);
range.setEnd(parent.childNodes[child], end);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
will be adding html tags dynamically to the div, the value is present at the center like
Test
The function should select only text Test. Please give some input to solve this issue

Insert text at caret position IE 8

I want to be able to enter some text at the caret position. Currently I can insert text at the end or start of the textbox OR replace the whole textbox content with the new text. How can I get the new text to insert into the textbox at the caret position?
What I want:
i.e textbox contatins "12,3" with caret being where the coma is. After function call it ends up like so: "12new text3"
Current code:
var sel = document.getElementById("txtbox");
var text = "new text";
//ie 8
if (document.selection) {
var range = document.selection.createRange();
sel.focus();
range = sel.createTextRange();
range.collapse(false);
range.text = text;
range.select();
}

I've not IE8 to test, but try this:
if (document.selection) {
var range = document.selection.createRange();
range.text = text;
range.select();
}
In your code you've defined range twice, and then collapsed the range (containing all the text in a textbox) to the end of the text.

javascript contenteditable: set cursor at character offset

I need to set the cursor at a specific character offset. In the example below, I'd want to, for example, set it between the "a" and the "b".
<ul contenteditable = true >
<li id = "test">abcdef</li>
</ul>
I asked before and got this fiddle: http://jsfiddle.net/5a9uD/1/
That worked great for the given example and for what I needed it for then. But it does not work with this example: http://jsfiddle.net/mdwWN/ It gets an IndexSizeError at
range = sel.getRangeAt(0);

You just have to pass text container's childNodes[0] to range.setStart function.
Check this out.
function setSelectionRange(aNode, childElem, aOffset) {
aNode.focus();
var sel = window.getSelection(),
range = sel.getRangeAt(0);
range.collapse(true);
range.setStart(childElem.childNodes[0], aOffset),
sel.removeAllRanges();
sel.addRange(range);
}
var container = document.getElementById("test");
var childElement = document.getElementById('item1');
setSelectionRange(container, childElement, 1);
Here is the working fiddle.