Checkbox click clear the contenteditable div selection
Question
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:
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!
1 answers
solution1
2 ACCPTED 2020-03-10 14:13:21
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.