Bold/unbold selected text using Window.getSelection() - javascript

I'm trying to make a simple text editor so users can be able to bold/unbold selected text. I want to use Window.getSelection() not Document.execCommand(). It does exactly what I want but when you bold any text, you can't unbold it. I want it in a way that I can bold and unbold any selected text. I tried several things but no success.
function addBold(){
const selection = window.getSelection().getRangeAt(0);
const selectedText = selection.extractContents();
const span = document.createElement("span");
span.classList.toggle("bold-span");
span.appendChild(selectedText);
selection.insertNode(span);
};
.bold-span {font-weight: bold;}
<p contentEditable>Bold anything here and unbold it</p>
<button onclick="addBold()">Bold</button>

This is close to what you want but groups words together so an unselect will remove from whole word. I have not been able to complete this as I have to go, but should be a good starting point.
function addBold(){
const selection = window.getSelection().getRangeAt(0);
let selectedParent = selection.commonAncestorContainer.parentElement;
//console.log(parent.classList.contains("bold-span"))
//console.log(parent)
let mainParent = selectedParent;
if(selectedParent.classList.contains("bold-span"))
{
var text = document.createTextNode(selectedParent.textContent);
mainParent = selectedParent.parentElement;
mainParent.insertBefore(text, selectedParent);
mainParent.removeChild(selectedParent);
mainParent.normalize();
}
else
{
const span = document.createElement("span");
span.classList.toggle("bold-span");
span.appendChild(selection.extractContents());
//selection.surroundContents(span);
selection.insertNode(span);
mainParent.normalize();
}
//selection is set to body after clicking button for some reason
//https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
};
.bold-span {font-weight: bold;}
<p contentEditable>Bold anything here and unbold it</p>
<button onclick="addBold()">Bold</button>

var span = '';
jQuery(function($) {
$('.embolden').click(function(){
var highlight = window.getSelection();
if(highlight != ""){
span = '<span class="bold">' + highlight + '</span>';
}else{
highlight = span;
span = $('span.bold').html();
}
var text = $('.textEditor').html();
$('.textEditor').html(text.replace(highlight, span));
});
});
You could define a function like this where the name of your class is "embolden"

Related

execCommand Bold Alternative

As the execCommand() is no longer recommended for new projects, how should I implement it?
What I've tried is to wrap the selected text in a tag and the removing it. It works fine as long as the user doesn't make it bold and then select half of bold and half of non-bold text...it crashes.
function bold(){
var selection = window.getSelection();
var selRange = selection.getRangeAt(0);
if (selection != "") {
let bold = document.createElement("strong");
selRange.surroundContents(bold);
//if it's already bode, the above two lines would have generated another <strong> tag
if (bold.childElementCount>0) {
//removing the child <strong> tag
bold.innerHTML = bold.firstChild.innerHTML;
let parent = bold.parentNode;
text = parent.innerHTML.replace(`<strong>${selection}</strong>`, selection);
parent.innerHTML = text;
}
}
}

Multiple paragraph selection incorrect, to be changed using the textnode

I'm having problems running an action on more than one line.
In practice I do not get the desired effect and <p> tags are completely emptied of their content. This is the simple code I use, but it only works on a line:
Try to look at code in action HERE .
Follow the instructions in the example to understand the real problem.
function press() {
if (document.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount < 1) {
return;
}
var r = window.getSelection().getRangeAt(0);
var selectedText = r.toString(),
content = r.extractContents();
span = document.createElement('span'),
t = document.createTextNode(selectedText);
selectedText = '';
span.style.color = 'green';
span.appendChild(t);
r.insertNode(span);
window.getSelection().removeAllRanges();
}
}
<p>Select only me for first: i don't have problems</p>
<p>Also select me at the same time of first paragraph, now i have problems..</p>
<button onclick="press()">Press after selecting the text</button>

How to getSelection() within a specific div?

I have a contenteditable div (with id 'editor1') that allows users to input text. There is then a function that allows them to color any highlighted text. My js uses window.getSelection().getRangeAt(0), but the issue with this is that they can highlight words outside of the div and their color will change as well. So far; I've tried:
function red(){
{
var getText = document.getElementById("editor1").innerHTML;
var selection = getText.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.style.color = "red";
span.appendChild(selectedText);
selection.insertNode(span);
}
}
Fiddle: https://jsfiddle.net/xacqzhvq/
As you can see, if I highlight "this will become red as well", I can use the button to make that red too.
How can I only color the highlighted text only within the editor1 div?
You are able to get the node element from the selection using .baseNode. From there you can get the parent node and use that for comparison.
function red(){
// If it's not the element with an id of "foo" stop the function and return
if(window.getSelection().baseNode.parentNode.id != "foo") return;
...
// Highlight if it is our div.
}
In the example below I made the div have an id that you can check to make sure it's that element:
Demo
As #z0mBi3 noted, this will work the first time. But may not work for many highlights (if they happen to get cleared). The <span> elements inside the div create a hierarchy where the div is the parent elements of many span elements. The solution to this would be to take traverse up through the ancestors of the node until you find one with the id of "foo".
Luckily you can use jQuery to do that for you by using their .closest() method:
if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;
Here is an answer with a native JS implemented method of .closest().
Are you looking for this,
//html
<body>
<p id='editor1'>asdf</p>
<button onclick='red()'>
RED
</button>
</body>
//JavaScript
window.red = function(){
//var getText = document.getElementById("editor1").innerHTML;
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.style.color = "red";
span.appendChild(selectedText);
selection.insertNode(span);
}
Plunker: https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview
Try This Code :
function addBold(){
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;
const selection = window.getSelection().getRangeAt(0);
let selectedParent = selection.commonAncestorContainer.parentElement;
let mainParent = selectedParent;
if(selectedParent.closest("b"))
{
//Unbold
var text = document.createTextNode(selectedParent.textContent);
mainParent = selectedParent.parentElement;
mainParent.insertBefore(text, selectedParent);
mainParent.removeChild(selectedParent);
mainParent.normalize();
}
else
{
const span = document.createElement("b");
span.appendChild(selection.extractContents());
selection.insertNode(span);
mainParent.normalize();
}
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
};
<div id="editor" contenteditable="true">
You are the programmers of the future
</div>
<button onclick="addBold()">Bold</button>
I got the code and added my edits from those following answers :
Bold/unbold selected text using Window.getSelection()
getSelection().focusNode inside a specific id doesn't work

How to add the <span> by javascript? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to use the Javascript to add/remove the CSS/colour style to the html page?
I have a question on the HTML and javascript. I got the following paragrahe.
function add_span(){
// ??
}
<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>
Is it possible to have the following result after the user
select the highlighted text by mouse
click the button
e.g.
highlight the 'statement1,'
click the button
Expected Result:
<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>
##### Updated Code, but no work
// updated code in the add_span
var selectedText;
if (window.getSelection)
{
selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
selectedText = document.getSelection();
}
else if (document.selection) // IE 6/7
{
selectedText = document.selection.createRange().text;
}
//create the DOM object
var newSpan = document.createElement('span');
// add the class to the 'spam'
newSpan.setAttribute('class', 'ABC');
document.getElementById('text').appendChild(newSpan);
var selectedTextNode = document.createTextNode();
newSpan.appendChild(selectedTextNode);
You can get selected text from #Pezhvak IMV's answer:
var selectedText;
if (window.getSelection)
{
selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
selectedText = document.getSelection();
}
else if (document.selection) // IE 6/7
{
selectedText = document.selection.createRange().text;
}
To add a element, you have to create a DOM node, set its attributes and add the element:
Create a DOM node:
var newSpan = document.createElement('span');
Set the class
newSpan.setAttribute('class', 'ABC');
Add the span to under the <p> (The <p> should have a id or some mechanism of identifying it:
<p id="text">
Add the <span> to under the <p>
document.getElementById('text').appendChild(newSpan);
And set the text
newSpan.innerHTML = selectedText;
You can also use createTextNode (alternative for step 5)
var selectedTextNode = document.createTextNode();
newSpan.appendChild(selectedTextNode);
To answer part of you question:
function getSelText() {
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection) // FireFox
{
txt = document.getSelection();
}
else if (document.selection) // IE 6/7
{
txt = document.selection.createRange().text;
}
else return; document.aform.selectedtext.value = txt; }

How to use the Javascript to add/remove the CSS/colour style to the html page?

I have a simple javascript question in the HTML page.
In my case, the user can use the mouse to select some text in the paragrahe, e.g. use the mouse to highlight the 'My name is John', and then click the one of the input button, then the selected text will be applied to selected button style to the text (e.g. add the CSS colour and clear the CSS colour).
For example, if I use the mouse to highlight the 'My name is John', and click 'red' button, the text of 'My name is John' will become red.
There is 1 HTML page and 1 js file.
I have the following code in the HTML page:
// text.html
// 3 input buttons with red, yellow and green colour
// 1 input button to clear the selected CSS colour
// 1 input button to clear all the selected CSS colour
<p>
<input type="button" onclick="colour('red')" value='red'/>
<input type="button" onclick="colour('yellow')" value='yellow'/>
<input type="button" onclick="colour('green')" value='green'/>
<input type="button" onclick="clear_colour()" value='Glear'/>
<input type="button" onclick="clear_colour_all()" value='Clear All'/>
</p>
// paragrahe
<p>
My name is John,
I live in ABC and I have a car.
I like to play TV game.
<p>
The text.js file
//text.js
function colour(colour) {
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
if (selectedText != '') {
// I don't know how to do in here!!!!!!!
}
}
function clear_colour() {
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
if (selectedText != '') {
// I don't know how to do in here!!!!!!!
// I just find the following code
// var selection= window.getSelection().getRangeAt(0);
//var selectedText = selection.extractContents();
}
}
function clear_colour_all() {
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
if (selectedText != '') {
// I don't know how to do in here!!!!!!!
}
}
And I expect the result like after select the text and select 'red' button (assum I have the CSS class is red)
// paragrahe
<p>
<span class="red">My name is John, </span>
I live in ABC and I have a car.
I like to play TV game.
<p>
if the user select the 'My name is John' and click the 'clear' button, it will return to
// paragrahe
<p>
My name is John,
I live in ABC and I have a car.
I like to play TV game.
<p>
P.S Due to some reasons, I don't want to use the jQuery or some other library to do so, but it is welcome to give the answer to use the jQuery. Thank you very much.
This will do the trick to wrap the selected text with a <span> node. I think you will need to change the getSelection() method in order to make it work in IE, but it works in FF:
function colour(colour) {
var selection= window.getSelection();
if (selection.toString()!=="") {
var range = selection.getRangeAt(0);
var span = document.createElement("span");
span.className = colour;
span.innerHTML = range.toString();
range.deleteContents();
range.insertNode(span);
}
}
EDIT: The other two functions:
function clear_colour() {
var selection= window.getSelection();
if (selection.toString()!=="" &&
selection.anchorNode.parentNode.nodeName==="SPAN") {
selection.anchorNode.parentNode.className="";
}
}
function clear_colour_all() {
var selection= document.getElementById('content');
var spans = selection.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].className="";
}
}
It have some weird behavior depending on how you select the text, but now you have something to work with ;)
You can use the following for selected text coloring (http://jsfiddle.net/7kh8s/):
*This is a very basic one I did, but selected color is working.
<script>
function colour(colour) {
getSelectionHTML(colour);
}
function getSelectionHTML(color)
{
if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
if (window.getSelection)
{
var sel = window.getSelection();
var html = "";
for (var i=0;i<sel.rangeCount;i++)
{
var d = document.createElement("span");
d.style.color = color;
var r = sel.getRangeAt(i);
var parent_element = r.commonAncestorContainer;
var prev_html = parent_element.innerHTML;
r.surroundContents(d);
html += d.innerHTML;
parent_element.innerHTML = prev_html;
}
return html;
}
return null;
}
</script>
<p>
My name is John,
I live in ABC and I have a car.
I like to play TV game.
</p>
<p>
<input type="button" onclick="colour('red')" value='red'/>
<input type="button" onclick="colour('blue')" value='blue'/>
</p>

Categories