Bold Selected Text in contentEditable div, using pure JavaScript without libraries such as jQuery

Question

We have an editable div and we want to change the style of the text, selected by the user, on clicking our button; just same as this editor's bold or italic button.

But when we click on the button our selected text get deselected.

So how to keep our selected text highlighted even if the focus from the editable is off and change the style.

My Code :

Editable Div:

var textbox= document.createElement("div");
textbox.setAttribute("contenteditable", "true");

Button :

var bold = document.createElement("div");
bold.innerHTML = "B";

Button Click:

bold.addEventListener("click", function(){
        getSelectedText();
},false);

    function getSelectedText()
    {
       var html = "";
       if (window.getSelection) {
         html = window.getSelection().toString();
       } 

       else if (document.selection && document.selection.type != "Control") {
            html = document.selection.createRange().text;
       }
       alert(html);
    }

Might need a listener to store the created range on blur. That's how I'd approach it, at least. — Josh Burgess, Apr 29 '15 at 18:25
Something seems to be afoot here. All the included code does is alerting the highlighted text, and that is working as intended. — John Weisz, Apr 29 '15 at 18:26
Can't you just use an actual button for bold instead of div? The selection will remain then. — Samurai, Apr 29 '15 at 18:40
@Samurai an actual button wil do my job but i have to use the div only sorry. — Piyush Srivastava, Apr 29 '15 at 18:45

score 2 · Answer 1 · answered Apr 29 '15 at 20:27

2

You can get the selection by listening to your contentEditable's onmouseup and store it in a variable. After you clicked a div, you restore the selection to back what it was:

Javascript:

var range = "";

function getSelected() {
    var selection = window.getSelection()
    range = selection.getRangeAt(0);
}

function reselect() {
    var selection = window.getSelection();  
    selection.removeAllRanges();
    selection.addRange(range);
}

jsfiddle DEMO
used a button and a div for buttons so you can see the difference.

answered Apr 29 '15 at 20:27

Samurai

3,724
5
27
39

1

your jsfiddle bold button does nothing – Timo Huovinen Apr 18 '16 at 12:48
In the jsfiddle provided the selected text is preserved when the button (or div) is clicked. The question was the selected text being deselected when the button is clicked (and the text losing focus). – Samurai Apr 18 '16 at 18:01
thank you for the clarification, in that case it does work, this is another way to do it: http://stackoverflow.com/a/11787147/175071 – Timo Huovinen Apr 19 '16 at 11:57
This answer is incomplete by the way. You should fix the buttons. – jerryurenaa Mar 09 '21 at 22:08

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

Either use the mousedown event instead of the click event or set the <div> button to be unselectable.

See this answer for details.

edited May 23 '17 at 12:24

Community

1
1

answered Apr 30 '15 at 08:42

Tim Down

318,141
75
454
536

Bold Selected Text in contentEditable div, using pure JavaScript without libraries such as jQuery

2 Answers2