Question

最近我研究了一个教程来构建一个简单的WYSIWYG编辑器，而不使用设计模式/ execCommand 。

最后，我提出了这样的解决方案：

HTML：

<button onclick="addClassToSelection('underline')"><b>U</b></button>
<button onclick="addClassToSelection('bold')"><b>B</b></button>

<select id="color_select">
    <option value="">Change Color</option>
    <option value="green">Green</option>
    <option value="red">Red</option>
</select>

<div id='fake_textarea' contenteditable>Test test test</div>

JS：

   function addClassToSelection(class_name){
            var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
            if(sel.getRangeAt){
                var range = sel.getRangeAt(0);
                var newNode = document.createElement("span"); 
                newNode.setAttribute('class', class_name);
                range.surroundContents(newNode);
            } else {
                //sel.pasteHTML('<span class="someclass">'+sel.htmlText+'</span>');
            }
        }

color_select.onchange = function(){
        //alert(color_select.value);
        addClassToSelection(color_select.value);
    };

它创建了一个围绕所选字符串的样式范围。问题是，如何删除样式，尤其是样式重叠时？

非常感谢

更新感谢upvoting，想想一个临时解决方案：

如果有两个粗体，则样式恢复正常，如下所示：

.bold .bold {
    font-weight:normal;
}

但是，这只适用一次，可以检查css中的偶数/奇数情况吗？感谢

简单的WYSIWYG编辑器：删除格式

0 个答案: