Question

我正在使用Javascript和JQuery在一个专门的文本/ HTML编辑器中工作。我用execcommand实现了不同的文本样式（粗体，斜体，...）。这似乎仅在所选文本不为空时才有效。解决这个问题的最佳方法是什么？

这里有一个例子，我想用Text作为编辑器中的文本，HTML是相应的html代码和成为光标位置：

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

按＆＃34;粗体＆＃34;按钮，execcommand（＆＃39; bold＆＃39;） - 命令应在选定的位置执行，插入符号应放在修改后的位置。

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/

Answer 1

我通过插入一个包含字母的文本节点，在该节点上调用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/

exec命令空选

1 个答案: