JavaScript-空选择时的execcommand

我正在一个可编辑content的div中使用Javascript和JQuery的专业文本/ HTML编辑器.我使用execcommand实现了不同的文本样式(粗体,斜体等).这似乎仅在所选文本不为空的情况下有效.解决此问题的最佳方法是什么？

这是我要处理的示例,其中Text是编辑器中的文本,HTML是相应的html代码,而|是是光标位置：

Text: Hello| World
HTML: <b>Hello| World</b>

通过按下“粗体”按钮,应在所选位置执行execcommand(‘bold’)-命令,并且插入符号应放置在修改后的位置内.

Text: Hello| World    
HTML: <b>Hello</b>|</b> World</b>

这是行不通的.我通过添加包含空白的文本节点找到了一种解决方法.这似乎可以在Internet Explorer中工作,但不能在Firefox中工作.这里有个简单的例子：

HTML：

<div id="textcontent" contenteditable="true" overflow:auto;"><p>Enter text</p></div>
<button type="button" id="setBold">Bold</button>

Javascript：

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    }
    else {
        var selObj = document.getSelection();
        var selRange = selObj.getRangeAt(0);        
        var newNode = document.createTextNode(' ');

        selRange.deleteContents();
        selRange.insertNode(newNode);

        selObj.removeAllRanges();
        selObj.addRange(selRange);

        document.execCommand('bold');

        selRange.deleteContents();
        selObj.removeAllRanges();
        selObj.addRange(selRange);        
    }
});

和相应的jsfiddle放在这里：http://jsfiddle.net/andibioticum/3V7pK/

解决方法:

我修改了解决方法,方法是插入一个包含字母的文本节点,在该节点上调用execcommand,然后将其删除,然后使用focus()设置插入符号.

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } 
    else {
        //get selected position
        var selObj = document.getSelection();
        //get range of selected position
        var selRange = selObj.getRangeAt(0);
        //Insert node with dummy text 'd'
        var newNode = document.createTextNode('d');
        selRange.insertNode(newNode);
        selObj.removeAllRanges();
        selObj.addRange(selRange);

        //Execute command on dummy
        document.execCommand('bold');

        //Delete dummy from range
        selRange.setStart(newNode, 0);
        selRange.setEnd(newNode, 1);
        selRange.deleteContents();

        selObj.removeAllRanges();
        selObj.addRange(selRange);
        //Focus on empty element
        $('#textcontent').focus();
   }
});

在这里查看小提琴：http://jsfiddle.net/andibioticum/XJuRf/

标签：dom,execcommand,html,javascript,jquery
来源： https://codeday.me/bug/20191121/2053124.html