Checkbox click clear the contenteditable div selection

user_12708425 0
Viewed 159

I am trying to make custom text editor with minimal functionalities like bold, italic, underline & paragraph styling only.

It's for study purpose. The main goal is to avoid color based interaction through JavaScript. I want to use color interaction with CSS only. So, I want to accomplish it with pure JS & CSS without using any library.

For this case, I used a checkbox for making bold font in contenteditable div. So, If I select bold font only text then I can set checkbox.checked = true through JavaScript.

But the checkbox clears the selection in html before getting range of selected text from div.innerHTML. How can I solve this problem?

function actionBold122(e){

    let editor = document.getElementById('editor')

    let input = e.getElementsByTagName('input')[0]

    if(input != null){
        input.checked = !input.checked
    }

    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {

            var arr  = []
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                arr.push(sel.getRangeAt(i).cloneContents().textContent);
            }
            html = arr.join();
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }


    alert(html)

}
input{

    display: none;
}

input:checked+svg{

    background-color: rgb(194, 10, 10);
    fill: #fff;
}

label{

    cursor: pointer;
}


#editor{

    width: 50%;
    min-height: 40px;
    background-color: antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>

    <label  onclick="actionBold122(this); return false">
        <input class="none" type="checkbox" name="0" checked>
         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
     </label>

    <div id="editor" contenteditable>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p>
    </div>
    <button  onclick="actionBold122(this)">Get Text</button>
</body>
</html>

Current code:

enter image description here

I want the same behave of Get Text button in to the checkbox input. I don't know what I need to do. Please suggest me any idea to overcome this problem. Thank you in advance!

css html javascript
1 Answers

Your problem is that you loose focus when you click the input, then, the text becomes unselected. How about if you store the selected text in a variable.

Something like this

function actionBold122(e){

    let editor = document.getElementById('editor')

    let input = e.getElementsByTagName('input')[0]

    if(input != null){
        input.checked = !input.checked
    }

    alert(selectedText);

}

var selectedText = '';

function onMouseUp() {
    const sel = window.getSelection();
    var arr  = []
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        arr.push(sel.getRangeAt(i).cloneContents().textContent);
    }
    selectedText = arr.join();
}
input{

    display: none;
}

input:checked+svg{

    background-color: rgb(194, 10, 10);
    fill: #fff;
}

label{

    cursor: pointer;
}


#editor{

    width: 50%;
    min-height: 40px;
    background-color: antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>

    <label  onclick="actionBold122(this); return false">
        <input class="none" type="checkbox" name="0" checked>
         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
     </label>

    <div onmouseup="onMouseUp()" id="editor" contenteditable>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p>
    </div>
    <button  onclick="actionBold122(this)">Get Text</button>
</body>
</html>

user_21470690
Related