Menu
I've got a contenteditable div and a few paragraphs in it.
Here's my code:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="main" contenteditable="true" style="border:solid 1px black; width:300px; height:300px"> <div>Hello world!</div> <div> <br> </div> <div>This is a paragraph</div> </div> </body> </html> Assuming, I want to make a range selection which will contain the string "world! This is"
How to do that?
857
Definition and Usage The contenteditable attribute specifies whether the content of an element is editable or not.
Answer: Use the HTML5 contenteditable Attribute You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.
To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed. to add a contenteditable div. document. addEventListener("keydown", (event) => { if (event.
Once you've got hold of the text nodes containing the text you want highlighted, it's easy. How you get those depends on how generic you need this to be. As it is at the moment, before the user has edited it, the following will work:
var mainDiv = document.getElementById("main"); var startNode = mainDiv.firstChild.firstChild; var endNode = mainDiv.childNodes[2].firstChild; var range = document.createRange(); range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world" range.setEnd(endNode, 7); // 7 is the length of "this is" var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
