I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on' <div> regains focus. It appears default functionality of a content editable div is to move the caret/cursor to the beginning of the text in the div each time you click on it, which is undesirable.
I believe I would have to store in a variable the current cursor position when they are leaving focus of the div, and then re-set this when they have focus inside again, but I have not been able to put together, or find a working code sample yet.
If anybody has any thoughts, working code snippets or samples I'd be happy to see them.
I don't really have any code yet but here is what I do have:
<script type="text/javascript">
// jQuery
$(document).ready(function() {
$('#area').focus(function() { .. } // focus I would imagine I need.
}
</script>
<div id="area" contentEditable="true"></div>
PS. I have tried this resource but it appears it does not work for a <div>. Perhaps only for textarea (How to move cursor to end of contenteditable entity)
This solution works in all major browsers:
saveSelection() is attached to the onmouseup and onkeyup events of the div and saves the selection to the variable savedRange.
restoreSelection() is attached to the onfocus event of the div and reselects the selection saved in savedRange.
This works perfectly unless you want the selection to be restored when the user clicks the div aswell (which is a bit unintuitative as normally you expect the cursor to go where you click but code included for completeness)
To achieve this the onclick and onmousedown events are canceled by the function cancelEvent() which is a cross browser function to cancel the event. The cancelEvent() function also runs the restoreSelection() function because as the click event is cancelled the div doesn't receive focus and therefore nothing is selected at all unless this functions is run.
The variable isInFocus stores whether it is in focus and is changed to "false" onblur and "true" onfocus. This allows click events to be cancelled only if the div is not in focus (otherwise you would not be able to change the selection at all).
If you wish to the selection to be change when the div is focused by a click, and not restore the selection onclick (and only when focus is given to the element programtically using document.getElementById("area").focus(); or similar then simply remove the onclick and onmousedown events. The onblur event and the onDivBlur() and cancelEvent() functions can also safely be removed in these circumstances.
This code should work if dropped directly into the body of an html page if you want to test it quickly:
<div id="area" style="width:300px;height:300px;" onblur="onDivBlur();" onmousedown="return cancelEvent(event);" onclick="return cancelEvent(event);" contentEditable="true" onmouseup="saveSelection();" onkeyup="saveSelection();" onfocus="restoreSelection();"></div>
<script type="text/javascript">
var savedRange,isInFocus;
function saveSelection()
{
if(window.getSelection)//non IE Browsers
{
savedRange = window.getSelection().getRangeAt(0);
}
else if(document.selection)//IE
{
savedRange = document.selection.createRange();
}
}
function restoreSelection()
{
isInFocus = true;
document.getElementById("area").focus();
if (savedRange != null) {
if (window.getSelection)//non IE and there is already a selection
{
var s = window.getSelection();
if (s.rangeCount > 0)
s.removeAllRanges();
s.addRange(savedRange);
}
else if (document.createRange)//non IE and no selection
{
window.getSelection().addRange(savedRange);
}
else if (document.selection)//IE
{
savedRange.select();
}
}
}
//this part onwards is only needed if you want to restore selection onclick
var isInFocus = false;
function onDivBlur()
{
isInFocus = false;
}
function cancelEvent(e)
{
if (isInFocus == false && savedRange != null) {
if (e && e.preventDefault) {
//alert("FF");
e.stopPropagation(); // DOM style (return false doesn't always work in FF)
e.preventDefault();
}
else {
window.event.cancelBubble = true;//IE stopPropagation
}
restoreSelection();
return false; // false = IE style
}
}
</script>
This is compatible with the standards-based browsers, but will probably fail in IE. I'm providing it as a starting point. IE doesn't support DOM Range.
var editable = document.getElementById('editable'),
selection, range;
// Populates selection and range variables
var captureSelection = function(e) {
// Don't capture selection outside editable region
var isOrContainsAnchor = false,
isOrContainsFocus = false,
sel = window.getSelection(),
parentAnchor = sel.anchorNode,
parentFocus = sel.focusNode;
while(parentAnchor && parentAnchor != document.documentElement) {
if(parentAnchor == editable) {
isOrContainsAnchor = true;
}
parentAnchor = parentAnchor.parentNode;
}
while(parentFocus && parentFocus != document.documentElement) {
if(parentFocus == editable) {
isOrContainsFocus = true;
}
parentFocus = parentFocus.parentNode;
}
if(!isOrContainsAnchor || !isOrContainsFocus) {
return;
}
selection = window.getSelection();
// Get range (standards)
if(selection.getRangeAt !== undefined) {
range = selection.getRangeAt(0);
// Get range (Safari 2)
} else if(
document.createRange &&
selection.anchorNode &&
selection.anchorOffset &&
selection.focusNode &&
selection.focusOffset
) {
range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
} else {
// Failure here, not handled by the rest of the script.
// Probably IE or some older browser
}
};
// Recalculate selection while typing
editable.onkeyup = captureSelection;
// Recalculate selection after clicking/drag-selecting
editable.onmousedown = function(e) {
editable.className = editable.className + ' selecting';
};
document.onmouseup = function(e) {
if(editable.className.match(/\sselecting(\s|$)/)) {
editable.className = editable.className.replace(/ selecting(\s|$)/, '');
captureSelection();
}
};
editable.onblur = function(e) {
var cursorStart = document.createElement('span'),
collapsed = !!range.collapsed;
cursorStart.id = 'cursorStart';
cursorStart.appendChild(document.createTextNode('—'));
// Insert beginning cursor marker
range.insertNode(cursorStart);
// Insert end cursor marker if any text is selected
if(!collapsed) {
var cursorEnd = document.createElement('span');
cursorEnd.id = 'cursorEnd';
range.collapse();
range.insertNode(cursorEnd);
}
};
// Add callbacks to afterFocus to be called after cursor is replaced
// if you like, this would be useful for styling buttons and so on
var afterFocus = [];
editable.onfocus = function(e) {
// Slight delay will avoid the initial selection
// (at start or of contents depending on browser) being mistaken
setTimeout(function() {
var cursorStart = document.getElementById('cursorStart'),
cursorEnd = document.getElementById('cursorEnd');
// Don't do anything if user is creating a new selection
if(editable.className.match(/\sselecting(\s|$)/)) {
if(cursorStart) {
cursorStart.parentNode.removeChild(cursorStart);
}
if(cursorEnd) {
cursorEnd.parentNode.removeChild(cursorEnd);
}
} else if(cursorStart) {
captureSelection();
var range = document.createRange();
if(cursorEnd) {
range.setStartAfter(cursorStart);
range.setEndBefore(cursorEnd);
// Delete cursor markers
cursorStart.parentNode.removeChild(cursorStart);
cursorEnd.parentNode.removeChild(cursorEnd);
// Select range
selection.removeAllRanges();
selection.addRange(range);
} else {
range.selectNode(cursorStart);
// Select range
selection.removeAllRanges();
selection.addRange(range);
// Delete cursor marker
document.execCommand('delete', false, null);
}
}
// Call callbacks here
for(var i = 0; i < afterFocus.length; i++) {
afterFocus[i]();
}
afterFocus = [];
// Register selection again
captureSelection();
}, 10);
};
Update
I've written a cross-browser range and selection library called Rangy that incorporates an improved version of the code I posted below. You can use the selection save and restore module for this particular question, although I'd be tempted to use something like #Nico Burns's answer if you're not doing anything else with selections in your project and don't need the bulk of a library.
Previous answer
You can use IERange (http://code.google.com/p/ierange/) to convert IE's TextRange into something like a DOM Range and use it in conjunction with something like eyelidlessness's starting point. Personally I would only use the algorithms from IERange that do the Range <-> TextRange conversions rather than use the whole thing. And IE's selection object doesn't have the focusNode and anchorNode properties but you should be able to just use the Range/TextRange obtained from the selection instead.
I might put something together to do this, will post back here if and when I do.
EDIT:
I've created a demo of a script that does this. It works in everything I've tried it in so far except for a bug in Opera 9, which I haven't had time to look into yet. Browsers it works in are IE 5.5, 6 and 7, Chrome 2, Firefox 2, 3 and 3.5, and Safari 4, all on Windows.
http://www.timdown.co.uk/code/selections/
Note that selections may be made backwards in browsers so that the focus node is at the start of the selection and hitting the right or left cursor key will move the caret to a position relative to the start of the selection. I don't think it is possible to replicate this when restoring a selection, so the focus node is always at the end of the selection.
I will write this up fully at some point soon.
I had a related situation, where I specifically needed to set the cursor position to the END of a contenteditable div. I didn't want to use a full fledged library like Rangy, and many solutions were far too heavyweight.
In the end, I came up with this simple jQuery function to set the carat position to the end of a contenteditable div:
$.fn.focusEnd = function() {
$(this).focus();
var tmp = $('<span />').appendTo($(this)),
node = tmp.get(0),
range = null,
sel = null;
if (document.selection) {
range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
range = document.createRange();
range.selectNode(node);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
tmp.remove();
return this;
}
The theory is simple: append a span to the end of the editable, select it, and then remove the span - leaving us with a cursor at the end of the div. You could adapt this solution to insert the span wherever you want, thus putting the cursor at a specific spot.
Usage is simple:
$('#editable').focusEnd();
That's it!
I took Nico Burns's answer and made it using jQuery:
Generic: For every div contentEditable="true"
Shorter
You'll need jQuery 1.6 or higher:
savedRanges = new Object();
$('div[contenteditable="true"]').focus(function(){
var s = window.getSelection();
var t = $('div[contenteditable="true"]').index(this);
if (typeof(savedRanges[t]) === "undefined"){
savedRanges[t]= new Range();
} else if(s.rangeCount > 0) {
s.removeAllRanges();
s.addRange(savedRanges[t]);
}
}).bind("mouseup keyup",function(){
var t = $('div[contenteditable="true"]').index(this);
savedRanges[t] = window.getSelection().getRangeAt(0);
}).on("mousedown click",function(e){
if(!$(this).is(":focus")){
e.stopPropagation();
e.preventDefault();
$(this).focus();
}
});
savedRanges = new Object();
$('div[contenteditable="true"]').focus(function(){
var s = window.getSelection();
var t = $('div[contenteditable="true"]').index(this);
if (typeof(savedRanges[t]) === "undefined"){
savedRanges[t]= new Range();
} else if(s.rangeCount > 0) {
s.removeAllRanges();
s.addRange(savedRanges[t]);
}
}).bind("mouseup keyup",function(){
var t = $('div[contenteditable="true"]').index(this);
savedRanges[t] = window.getSelection().getRangeAt(0);
}).on("mousedown click",function(e){
if(!$(this).is(":focus")){
e.stopPropagation();
e.preventDefault();
$(this).focus();
}
});
div[contenteditable] {
padding: 1em;
font-family: Arial;
outline: 1px solid rgba(0,0,0,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contentEditable="true"></div>
<div contentEditable="true"></div>
<div contentEditable="true"></div>
After playing around I've modified eyelidlessness' answer above and made it a jQuery plugin so you can just do one of these:
var html = "The quick brown fox";
$div.html(html);
// Select at the text "quick":
$div.setContentEditableSelection(4, 5);
// Select at the beginning of the contenteditable div:
$div.setContentEditableSelection(0);
// Select at the end of the contenteditable div:
$div.setContentEditableSelection(html.length);
Excuse the long code post, but it may help someone:
$.fn.setContentEditableSelection = function(position, length) {
if (typeof(length) == "undefined") {
length = 0;
}
return this.each(function() {
var $this = $(this);
var editable = this;
var selection;
var range;
var html = $this.html();
html = html.substring(0, position) +
'<a id="cursorStart"></a>' +
html.substring(position, position + length) +
'<a id="cursorEnd"></a>' +
html.substring(position + length, html.length);
console.log(html);
$this.html(html);
// Populates selection and range variables
var captureSelection = function(e) {
// Don't capture selection outside editable region
var isOrContainsAnchor = false,
isOrContainsFocus = false,
sel = window.getSelection(),
parentAnchor = sel.anchorNode,
parentFocus = sel.focusNode;
while (parentAnchor && parentAnchor != document.documentElement) {
if (parentAnchor == editable) {
isOrContainsAnchor = true;
}
parentAnchor = parentAnchor.parentNode;
}
while (parentFocus && parentFocus != document.documentElement) {
if (parentFocus == editable) {
isOrContainsFocus = true;
}
parentFocus = parentFocus.parentNode;
}
if (!isOrContainsAnchor || !isOrContainsFocus) {
return;
}
selection = window.getSelection();
// Get range (standards)
if (selection.getRangeAt !== undefined) {
range = selection.getRangeAt(0);
// Get range (Safari 2)
} else if (
document.createRange &&
selection.anchorNode &&
selection.anchorOffset &&
selection.focusNode &&
selection.focusOffset
) {
range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
} else {
// Failure here, not handled by the rest of the script.
// Probably IE or some older browser
}
};
// Slight delay will avoid the initial selection
// (at start or of contents depending on browser) being mistaken
setTimeout(function() {
var cursorStart = document.getElementById('cursorStart');
var cursorEnd = document.getElementById('cursorEnd');
// Don't do anything if user is creating a new selection
if (editable.className.match(/\sselecting(\s|$)/)) {
if (cursorStart) {
cursorStart.parentNode.removeChild(cursorStart);
}
if (cursorEnd) {
cursorEnd.parentNode.removeChild(cursorEnd);
}
} else if (cursorStart) {
captureSelection();
range = document.createRange();
if (cursorEnd) {
range.setStartAfter(cursorStart);
range.setEndBefore(cursorEnd);
// Delete cursor markers
cursorStart.parentNode.removeChild(cursorStart);
cursorEnd.parentNode.removeChild(cursorEnd);
// Select range
selection.removeAllRanges();
selection.addRange(range);
} else {
range.selectNode(cursorStart);
// Select range
selection.removeAllRanges();
selection.addRange(range);
// Delete cursor marker
document.execCommand('delete', false, null);
}
}
// Register selection again
captureSelection();
}, 10);
});
};
You can leverage selectNodeContents which is supported by modern browsers.
var el = document.getElementById('idOfYoursContentEditable');
var selection = window.getSelection();
var range = document.createRange();
selection.removeAllRanges();
range.selectNodeContents(el);
range.collapse(false);
selection.addRange(range);
el.focus();
In Firefox you might have the text of the div in a child node (o_div.childNodes[0])
var range = document.createRange();
range.setStart(o_div.childNodes[0],last_caret_pos);
range.setEnd(o_div.childNodes[0],last_caret_pos);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
I may be late to the party with this one, but maybe instead of just manipulating the dom on the frontend you could store whatever the current value of the tag you are edititing in a variable that is not the value that is being rendered to the dom. Then you can detect a page refresh and change the value of the innerHTML of the tag then, or in my case you just need to keep track of the changes and send this to a back end. Perhaps my words won't do any justice so I will write a code example that has worked for my use case.
import React, { ChangeEvent, useEffect, useState } from "react";
interface IParentProps {}
const ParentComp: React.FC<IParentProps> = (props) => {
const [innerValue, setInnerValue] = useState<string>();
const [ghostValue, setGhostValue] = useState<string>();
// create some boolean to detect when the enter key was pressed in the input field so that you
//can remove the input field and add the child component
const handleChange = (event: ChangeEvent<HTMLDivElement>) => {
setInnerValue(event.currentTarget.innerHTML);
setGhostValue(event.currentTarget.innerHTML);
};
const handleGhostChange = (event: ChangeEvent<HTMLDivElement>) => {
setGhostValue(event.currentTarget.innerHTML);
};
//handle screen refresh, or send the ghost value to the backend
useEffect(() => {}, []);
return (
<div>
<input type="text" onChange={handleChange} />
<ChildComponent handleChange={handleGhostChange}>
{innerValue}
</ChildComponent>
</div>
);
};
interface IChildProps {
handleChange: (e: ChangeEvent<HTMLDivElement>) => void;
children: React.ReactNode;
}
const ChildComponent: React.FC<IChildProps> = (props) => {
return (
<p
contentEditable="true"
suppressContentEditableWarning={true}
onInput={props.handleChange}
>
{props.children}
</p>
);
};
I hope this makes sense if you would like me to revise the answer without the typescript bloat I am willing and able. If this works for you guys please let me know I think this is a much simplier solution then trying to reconfigure the cursor how you want it personally.
Related
I would like to have users click a link, then it selects the HTML text in another element (not an input).
By "select" I mean the same way you would select text by dragging your mouse over it. This has been a bear to research because everyone talks about "select" or "highlight" in other terms.
Is this possible? My code so far:
HTML:
Select Code
<code id="xhtml-code">Some Code here </code>
JS:
function SelectText(element) {
$("#" + element).select();
}
Am I missing something blatantly obvious?
Plain Javascript
function selectText(nodeId) {
const node = document.getElementById(nodeId);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Could not select text in node: Unsupported browser.");
}
}
const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));
<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>
Here is a working demo. For those of you looking for a jQuery plugin, I made one of those too.
jQuery (original answer)
I have found a solution for this in this thread. I was able to modify the info given and mix it with a bit of jQuery to create a totally awesome function to select the text in any element, regardless of browser:
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
Here's a version with no browser sniffing and no reliance on jQuery:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
This thread (dead link) contains really wonderful stuff. But I'm not able to do it right on this page using FF 3.5b99 + FireBug due to "Security Error".
Yipee!! I was able to select whole right hand sidebar with this code hope it helps you:
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PS:- I was not able to use objects returned by jquery selectors like
var w=$("div.welovestackoverflow",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
Jason's code can not be used for elements inside an iframe (as the scope differs from window and document). I fixed that problem and I modified it in order to be used as any other jQuery plugin (chainable):
Example 1: Selection of all text inside < code > tags with single click and add class "selected":
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
Example 2: On button click, select an element inside an Iframe:
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
Note: remember that the iframe source should reside in the same domain to prevent security errors.
jQuery Plugin:
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
I tested it in IE8, Firefox, Opera, Safari, Chrome (current versions). I'm not sure if it works in older IE versions (sincerely I don't care).
You can use the following function to select content of any element:
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
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);
}
};
This function can be called as follows:
$('#selectme').selectText();
I was searching for the same thing, my solution was this:
$('#el-id').focus().select();
I liked lepe's answer except for a few things:
Browser-sniffing, jQuery or no isn't optimal
DRY
Doesn't work in IE8 if obj's parent doesn't support createTextRange
Chrome's ability to use setBaseAndExtent should be leveraged (IMO)
Will not select text spanning across multiple DOM elements (elements within the "selected" element). In other words if you call selText on a div containing multiple span elements, it will not select the text of each of those elements. That was a deal-breaker for me, YMMV.
Here's what I came up with, with a nod to lepe's answer for inspiration. I'm sure I'll be ridiculed as this is perhaps a bit heavy-handed (and actually could be moreso but I digress). But it works and avoids browser-sniffing and that's the point.
selectText:function(){
var range,
selection,
obj = this[0],
type = {
func:'function',
obj:'object'
},
// Convenience
is = function(type, o){
return typeof o === type;
};
if(is(type.obj, obj.ownerDocument)
&& is(type.obj, obj.ownerDocument.defaultView)
&& is(type.func, obj.ownerDocument.defaultView.getSelection)){
selection = obj.ownerDocument.defaultView.getSelection();
if(is(type.func, selection.setBaseAndExtent)){
// Chrome, Safari - nice and easy
selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
}
else if(is(type.func, obj.ownerDocument.createRange)){
range = obj.ownerDocument.createRange();
if(is(type.func, range.selectNodeContents)
&& is(type.func, selection.removeAllRanges)
&& is(type.func, selection.addRange)){
// Mozilla
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {
range = document.body.createTextRange();
if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
// IE most likely
range.moveToElementText(obj);
range.select();
}
}
// Chainable
return this;
}
That's it. Some of what you see is the for readability and/or convenience. Tested on Mac in latest versions of Opera, Safari, Chrome, Firefox and IE. Also tested in IE8. Also I typically only declare variables if/when needed inside code blocks but jslint suggested they all be declared up top. Ok jslint.
Edit
I forgot to include how to tie this in to the op's code:
function SelectText(element) {
$("#" + element).selectText();
}
Cheers
An Updated version that works in chrome:
function SelectText(element) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
$(function() {
$('p').click(function() {
SelectText("selectme");
});
});
http://jsfiddle.net/KcX6A/326/
For any tag one can select all text inside that tag by this short and simple code. It will highlight the entire tag area with yellow colour and select text inside it on single click.
document.onclick = function(event) {
var range, selection;
event.target.style.backgroundColor = 'yellow';
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
};
Have a look at the Selection object (Gecko engine) and the TextRange object (Trident engine.) I don't know about any JavaScript frameworks that have cross-browser support for this implemented, but I've never looked for it either, so it's possible that even jQuery has it.
lepe - That works great for me thanks!
I put your code in a plugin file, then used it in conjunction with an each statement so you can have multiple pre tags and multiple "Select all" links on one page and it picks out the correct pre to highlight:
<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectText").each(function(indx) {
$(this).click(function() {
$('pre').eq(indx).selText().addClass("selected");
return false;
});
});
});
Tim's method works perfectly for my case - selecting the text in a div for both IE and FF after I replaced the following statement:
range.moveToElementText(text);
with the following:
range.moveToElementText(el);
The text in the div is selected by clicking it with the following jQuery function:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
here is another simple solution to get the selected the text in the form of string, you can use this string easily to append a div element child into your code:
var text = '';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
text = text.toString();
My particular use-case was selecting a text range inside an editable span element, which, as far as I could see, is not described in any of the answers here.
The main difference is that you have to pass a node of type Text to the Range object, as described in the documentation of Range.setStart():
If the startNode is a Node of type Text, Comment, or CDATASection,
then startOffset is the number of characters from the start of
startNode. For other Node types, startOffset is the number of child
nodes between the start of the startNode.
The Text node is the first child node of a span element, so to get it, access childNodes[0] of the span element. The rest is the same as in most other answers.
Here a code example:
var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Other relevant documentation:
Range
Selection
Document.createRange()
Window.getSelection()
Added jQuery.browser.webkit to the "else if" for Chrome. Could not get this working in Chrome 23.
Made this script below for selecting the content in a <pre> tag that has the class="code".
jQuery( document ).ready(function() {
jQuery('pre.code').attr('title', 'Click to select all');
jQuery( '#divFoo' ).click( function() {
var refNode = jQuery( this )[0];
if ( jQuery.browser.msie ) {
var range = document.body.createTextRange();
range.moveToElementText( refNode );
range.select();
} else if ( jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.webkit ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
console.log(selection);
var range = refNode.ownerDocument.createRange();
range.selectNodeContents( refNode );
selection.removeAllRanges();
selection.addRange( range );
} else if ( jQuery.browser.safari ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent( refNode, 0, refNode, 1 );
}
} );
} );
According to the jQuery documentation of select():
Trigger the select event of each matched element. This causes all of the functions that have been bound to that select event to be executed, and calls the browser's default select action on the matching element(s).
There is your explanation why the jQuery select() won't work in this case.
I would like to have users click a link, then it selects the HTML text in another element (not an input).
By "select" I mean the same way you would select text by dragging your mouse over it. This has been a bear to research because everyone talks about "select" or "highlight" in other terms.
Is this possible? My code so far:
HTML:
Select Code
<code id="xhtml-code">Some Code here </code>
JS:
function SelectText(element) {
$("#" + element).select();
}
Am I missing something blatantly obvious?
Plain Javascript
function selectText(nodeId) {
const node = document.getElementById(nodeId);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Could not select text in node: Unsupported browser.");
}
}
const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));
<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>
Here is a working demo. For those of you looking for a jQuery plugin, I made one of those too.
jQuery (original answer)
I have found a solution for this in this thread. I was able to modify the info given and mix it with a bit of jQuery to create a totally awesome function to select the text in any element, regardless of browser:
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
Here's a version with no browser sniffing and no reliance on jQuery:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
This thread (dead link) contains really wonderful stuff. But I'm not able to do it right on this page using FF 3.5b99 + FireBug due to "Security Error".
Yipee!! I was able to select whole right hand sidebar with this code hope it helps you:
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PS:- I was not able to use objects returned by jquery selectors like
var w=$("div.welovestackoverflow",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
Jason's code can not be used for elements inside an iframe (as the scope differs from window and document). I fixed that problem and I modified it in order to be used as any other jQuery plugin (chainable):
Example 1: Selection of all text inside < code > tags with single click and add class "selected":
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
Example 2: On button click, select an element inside an Iframe:
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
Note: remember that the iframe source should reside in the same domain to prevent security errors.
jQuery Plugin:
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
I tested it in IE8, Firefox, Opera, Safari, Chrome (current versions). I'm not sure if it works in older IE versions (sincerely I don't care).
You can use the following function to select content of any element:
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
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);
}
};
This function can be called as follows:
$('#selectme').selectText();
I was searching for the same thing, my solution was this:
$('#el-id').focus().select();
I liked lepe's answer except for a few things:
Browser-sniffing, jQuery or no isn't optimal
DRY
Doesn't work in IE8 if obj's parent doesn't support createTextRange
Chrome's ability to use setBaseAndExtent should be leveraged (IMO)
Will not select text spanning across multiple DOM elements (elements within the "selected" element). In other words if you call selText on a div containing multiple span elements, it will not select the text of each of those elements. That was a deal-breaker for me, YMMV.
Here's what I came up with, with a nod to lepe's answer for inspiration. I'm sure I'll be ridiculed as this is perhaps a bit heavy-handed (and actually could be moreso but I digress). But it works and avoids browser-sniffing and that's the point.
selectText:function(){
var range,
selection,
obj = this[0],
type = {
func:'function',
obj:'object'
},
// Convenience
is = function(type, o){
return typeof o === type;
};
if(is(type.obj, obj.ownerDocument)
&& is(type.obj, obj.ownerDocument.defaultView)
&& is(type.func, obj.ownerDocument.defaultView.getSelection)){
selection = obj.ownerDocument.defaultView.getSelection();
if(is(type.func, selection.setBaseAndExtent)){
// Chrome, Safari - nice and easy
selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
}
else if(is(type.func, obj.ownerDocument.createRange)){
range = obj.ownerDocument.createRange();
if(is(type.func, range.selectNodeContents)
&& is(type.func, selection.removeAllRanges)
&& is(type.func, selection.addRange)){
// Mozilla
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {
range = document.body.createTextRange();
if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
// IE most likely
range.moveToElementText(obj);
range.select();
}
}
// Chainable
return this;
}
That's it. Some of what you see is the for readability and/or convenience. Tested on Mac in latest versions of Opera, Safari, Chrome, Firefox and IE. Also tested in IE8. Also I typically only declare variables if/when needed inside code blocks but jslint suggested they all be declared up top. Ok jslint.
Edit
I forgot to include how to tie this in to the op's code:
function SelectText(element) {
$("#" + element).selectText();
}
Cheers
An Updated version that works in chrome:
function SelectText(element) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
$(function() {
$('p').click(function() {
SelectText("selectme");
});
});
http://jsfiddle.net/KcX6A/326/
For any tag one can select all text inside that tag by this short and simple code. It will highlight the entire tag area with yellow colour and select text inside it on single click.
document.onclick = function(event) {
var range, selection;
event.target.style.backgroundColor = 'yellow';
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
};
Have a look at the Selection object (Gecko engine) and the TextRange object (Trident engine.) I don't know about any JavaScript frameworks that have cross-browser support for this implemented, but I've never looked for it either, so it's possible that even jQuery has it.
lepe - That works great for me thanks!
I put your code in a plugin file, then used it in conjunction with an each statement so you can have multiple pre tags and multiple "Select all" links on one page and it picks out the correct pre to highlight:
<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectText").each(function(indx) {
$(this).click(function() {
$('pre').eq(indx).selText().addClass("selected");
return false;
});
});
});
Tim's method works perfectly for my case - selecting the text in a div for both IE and FF after I replaced the following statement:
range.moveToElementText(text);
with the following:
range.moveToElementText(el);
The text in the div is selected by clicking it with the following jQuery function:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
here is another simple solution to get the selected the text in the form of string, you can use this string easily to append a div element child into your code:
var text = '';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
text = text.toString();
My particular use-case was selecting a text range inside an editable span element, which, as far as I could see, is not described in any of the answers here.
The main difference is that you have to pass a node of type Text to the Range object, as described in the documentation of Range.setStart():
If the startNode is a Node of type Text, Comment, or CDATASection,
then startOffset is the number of characters from the start of
startNode. For other Node types, startOffset is the number of child
nodes between the start of the startNode.
The Text node is the first child node of a span element, so to get it, access childNodes[0] of the span element. The rest is the same as in most other answers.
Here a code example:
var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Other relevant documentation:
Range
Selection
Document.createRange()
Window.getSelection()
Added jQuery.browser.webkit to the "else if" for Chrome. Could not get this working in Chrome 23.
Made this script below for selecting the content in a <pre> tag that has the class="code".
jQuery( document ).ready(function() {
jQuery('pre.code').attr('title', 'Click to select all');
jQuery( '#divFoo' ).click( function() {
var refNode = jQuery( this )[0];
if ( jQuery.browser.msie ) {
var range = document.body.createTextRange();
range.moveToElementText( refNode );
range.select();
} else if ( jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.webkit ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
console.log(selection);
var range = refNode.ownerDocument.createRange();
range.selectNodeContents( refNode );
selection.removeAllRanges();
selection.addRange( range );
} else if ( jQuery.browser.safari ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent( refNode, 0, refNode, 1 );
}
} );
} );
According to the jQuery documentation of select():
Trigger the select event of each matched element. This causes all of the functions that have been bound to that select event to be executed, and calls the browser's default select action on the matching element(s).
There is your explanation why the jQuery select() won't work in this case.
I am using Summernote plugin to create a nice textarea and Mark.js plugin to highlight a defined keyword (for example foo) inside that textarea.
I have this HTML code:
<div id="text"></div>
And Javascript code:
$('#text').summernote({
height: 150,
callbacks: {
onChange: function (contents, $editable){
$('.note-editable').unmark({"done": function () {
$('.note-editable').mark(
'foo',
{'separateWordSearch': false })
}})
}
}
}
);
JSFiddle
And it's working well. Every time the user writes foo in the textarea the word is being highlighted, but I have this issue: when the user writes foo the cursor moves to the beginning of the foo word and I don't want this. How can I fix this?
The editable div(s) are not the ideal types to handle inputs. Similar cursor behavior is common where the value of an editable div is being updated explicitly using JS or jQuery. To solve this, you either need to use suitable default input types like <input> and <textarea> tags.
And that doesn't solve your use case as you wont be able to change the properties of the selected text. So the solution is as follows at client side:
Create a global variable to store the updated value of cursor for each such editable div.
Update the value of this global variable on each onblur event.
Retrieve this global value before highlighting your keyword.
Update the cursor to the retrieved value after making the necessary keyword highlights.
Following are the function to retrieve and update the cursor value :
function doGetCaretPosition (id, storeTo) {
var oField = document.getElementById(id);
// Initialize
var iCaretPos = -1;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionStart;
// Return results
if( window[storeTo] !== undefined || window[storeTo] !== '' )
{
//if position is not updated
if( $(oField).val().length == iCaretPos )
window[storeTo] = -1;
else
window[storeTo] = iCaretPos;
console.log("[doGetCaretPosition Updated] "+$(oField).attr('id')+" in : "+window[storeTo]);
}
else
console.log("[doGetCaretPosition : failed]");
}
//Set caret position
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', window[caretPos]);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(window[caretPos], window[caretPos]);
}
else
elem.focus();
}
}
console.log( "[setCaretPosition Updated]" );
}
Thats because your highlighted text will get a <markjs highlighted="true">foo</markjs> tag become. You have to setup your cursor at the end of that tag. If you have time I will update this post in a hour with the solution.
How to show a little image after selecting some text when we using the window.getSelection() code?
The most similar thing I found was this How can I position an element next to user text selection? but cant seem to get it to work properly :-s
Being kinda new to this also doesn't help.
Just need some simple code to do it, doesn't matter much where the image shows up, aslong as its near the selected text
-edit-
As I said in comment, the idea is to show a button (thought of image first but a button is better) floating near the selected text (after the selection is made), with link to quote what was selected, and if we clear what was selected the button doesn't show anymore.
And would this be possible by pulling mouse coords when finishing text selection and adding the x,y coords to the style of the button to be shown?
-edit-
got it working just like I wanted, having that coords idea in mind. Found this http://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.html and with it I came up with this:
function getSelected() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.getSelection) {
return document.getSelection();
}
else {
var selection = document.selection && document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
}
$(document).ready(function() {
var blank = '',
selectionImage;
$('#mensagem').mouseup(function(e) {
var selection = getSelected();
if (!selectionImage) {
selectionImage = $('<button>').attr({
type: 'button',
title: 'Citar Texto seleccionado',
id: 'quote-place'
}).html("Citar").css({
"color": "red"
}).hide();
$(document.body).append(selectionImage);
}
$("#quote-place").click(function quote() {
var txt = '';
if (window.getSelection) {
txt = window.getSelection();
}
else if (document.getSelection) {
txt = document.getSelection();
}
else if (document.selection) {
txt = document.selection.createRange().text;
}
else {
return;
}
document.aform.selectedtext.value = txt;
}).mousedown(function() {
if (selectionImage) {
selectionImage.fadeOut();
}
});
selectionImage.css({
top: e.pageY - 30,
//offsets
left: e.pageX - 13 //offsets
}).fadeIn();
});
});
http://jsfiddle.net/ordhor/2Gc8c/
The problem now lies on when we click on the <div> without selecting text the button keeps showing. It should only appear when selecting text and I cant find how to fix it...
Let's suppose that image is the image element you want to insert. The idea is to place a place-holder <span> element after the selected text, since we can't compute the position of text nodes. So, we start with this CSS:
.place-holder {position: relative;}
.quote-image {
position: absolute;
top: 0;
left: 0;
}
The place-holder class is for our <span> element, and the position property for the image we want to put in, which is absolutely positioned in order to keep a zero-width <span>.
Now we want to check whether a selection is made or not. Unfortunately, there's no standard event raised when a selection is made. The onselect event is fired only if a selection is made in text fields, and not even when the selection is canceled.
But since the selection is usually made using mouse and keyboard events, we can listen to them and check if a selection is made.
var prevRng;
function checkSelection() {
var s = getSelection(), r = s.rangeCount && s.getRangeAt(0);
if (prevRng) {
if (!r || r.endContainer !== prevRng.endContainer
|| r.endOffset !== prevRng.endOffset) {
// The selection has changed or been cleared
selectionClear();
}
}
if (r) setPlaceHolder(r);
}
document.addEventListener("mouseup", checkSelection);
// mousedown usually clears the selection
document.addEventListener("mousedown", checkSelection);
// You can use the keyboard to extend the selection, or select all (Ctrl+A)
document.addEventListener("keyup", checkSelection);
prevRng is a variable in the function scope to store the selection made. Now we can make our working code:
function setPlaceHolder(range) {
if (range.startContainer === range.endContainer
&& range.startOffset === range.endOffset) {
// The selection is clear
prevRng = null;
return;
}
prevRng = range;
var endc = range.endContainer, span = document.createElement("span");
span.className = "place-holder";
span.appendChild(image);
if (endc.nodeType === Node.TEXT_NODE) { // Node.TEXT_NODE === 3
var p1 = endc.nodeValue.substring(0, range.endOffset),
p2 = endc.nodeValue.substring(range.endOffset);
endc.nodeValue = p1;
if (p2)
endc.parentNode.insertBefore(document.createTextNode(p2),
endc.nextSibling);
}
endc.parentNode.insertBefore(image, endc.nextSibling);
}
function selectionClear() {
if (!prevRng) return;
var endc = prevRng.endContainer;
if (endc.nextSibling.className === "place-holder") {
endc.parentNode.removeChild(endc.nextSibling);
if (endc.nodeType === Node.TEXT_NODE
&& endc.nextSibling.nodeType === Node.TEXT_NODE) {
// Joining previously divided text nodes
endc.nodeValue += endc.nextSibling.nodeValue;
endc.parentNode.removeChild(endc.nextSibling);
}
}
}
Edit: it seems I've misunderstood your question. I thought you wanted to insert the image after the selection... So, you want to know when the selection is actually made?
Edit 2: changed more or less everything to match the request.
For example:
$("div.rte").on("mouseup",function(){ // event binding on the div
if(window.getSelection().toString().length>0) //check length if >0 then only proceed
{
// do processing
}
this should resolve your problem from my understanding of the problem
I have been trying to implement similar functionality , my problem is that the document can be edited as well.
The way of saving the annotation is a challenge, currently Im thinking to save the start and end index of the annotion in the db, when document content changes , using mutation observers , I will calculate the new char count of the annotation and then save again in db
Please let me know are there any other ways of storing and retrieving from db
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>