使用香草Javascript封装所选文本的HTML

拉胡尔·德赛(Rahul Desai)

我正在开发一个所见即所得的编辑器,由于先前的操作,我无法删除添加的HTML。

重现该问题:选择文本并将其加粗。现在尝试取消粗体。我可以删除该类,但不能删除包装<span>[我在每次单击事件时都将HTML记录在控制台中。]

这是我尝试过的:

        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(selectedText));

但是,它不会删除包装的HTML。

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

function replaceSelectedText(className) {
    var selectedText, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        selectedText = window.getSelection().toString();        
        console.log(selectedText);
        // check if selection has a class
        if(isChrome){
            if(sel.baseNode.parentElement.className && sel.rangeCount){
                console.log("isChrome className:" + sel.baseNode.parentElement.className);
                sel.baseNode.parentElement.className = "";
                
                range = sel.getRangeAt(0);
                range.deleteContents();  // doesnt delete the wrapping HTML
                range.insertNode(document.createTextNode(selectedText));
                
                return false;
            }
        }
        
        if(isFirefox){
            if(sel.anchorNode.nextElementSibling.className){
                console.log("isFirefox className:" + sel.anchorNode.nextElementSibling.className);
                sel.anchorNode.nextElementSibling.className = "";
                return false;
            }
        }
        
        
        //console.log(selectedText);
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var element = document.createElement('span');
            element.className = className;
            element.textContent = selectedText;
            range.insertNode(element);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

var toolbarButtons = document.querySelectorAll("#toolbar button");
//console.log(toolbarButtons);
for (var i = 0; i < toolbarButtons.length; ++i) {
    toolbarButtons[i].addEventListener('click', function(){
        replaceSelectedText(this.id);
        console.log(document.getElementById("editable").innerHTML);
    });
}
#editable{
    border: 1px solid #000000;
    margin-top: 20px;
    height: 50px;
    font-family: Arial;
}

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}
<div id="toolbar">
    <button id="bold">Bold</button>
    <button id="italic">Italic</button>
</div>

<div id="editable" contentEditable="true">
    <div>Lorem Ipsum Lorem Ipsum</div>
</div>

我该如何解决?

拉胡尔·德赛(Rahul Desai)

我通过在用户提交表单时<span>className使用regex过滤掉来解决此问题

sourceHTML = sourceHTML.replace(/\<span class=""\>([a-zA-Z0-9\s]+)\<\/span\>/g, "$1");

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章