时间戳

首页 > 解决方案 > 复选框单击清除 contenteditable div 选择

javascript - 复选框单击清除 contenteditable div 选择

问题描述

我正在尝试制作具有最少功能的自定义文本编辑器，例如粗体、斜体、下划线和段落样式。

是为了学习。主要目标是避免通过 JavaScript 进行基于颜色的交互。我只想使用与 CSS 的颜色交互。所以，我想用纯 JS 和 CSS 来完成它，而不使用任何库。

对于这种情况，我使用 acheckbox在contenteditablediv 中制作粗体字体。所以，如果我只选择粗体文本，那么我可以checkbox.checked = true通过 JavaScript 进行设置。

但是该复选框在range从div.innerHTML. 我怎么解决这个问题？

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>

当前代码：

在此处输入图像描述

我希望Get Text button具有相同的行为checkbox input。我不知道我需要做什么。请建议我任何想法来克服这个问题。先感谢您！

标签： javascripthtmlcss

解决方案

您的问题是您在单击输入时失去焦点，然后文本变为未选中。如果将选定的文本存储在变量中怎么样。

像这样的东西

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>

推荐阅读