execcommand在空选择 [英] execcommand on empty selection

问题描述

我正在一个专门的文本/ HTML编辑器与Javascript和JQuery在一个contenteditable div。我用execcommand实现了不同的文本样式（粗体，斜体，...）。这只有在所选文本不为空的情况下才有效。解决这个问题的最好方法是什么？

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

 文本：您好| World 
 HTML：< b>您好|世界< / B个
  

通过按一个粗体按钮，execcommand（'bold'） - 命令应该执行所选位置和插入符号应放置在修改位置内。

 文本：您好！ World 
 HTML：< b> Hello< / b> |< / b>世界< / B个
  

这不行。通过添加包含空白的文本节点找到了解决方法。这似乎在Internet Explorer中起作用，但在Firefox中不起作用。这里有一个简单的例子：

HTML：

 < div id =textcontentcontenteditable =trueoverflow：auto;>< p>输入文本< / p>< / div> 
< button type =buttonid =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（）; 
 selOb j.addRange（selRange）; 
} 
}）; 
  

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

解决方案

我修改了我的解决方法 - 通过插入包含一个字母的文本节点，调用该节点上的exec命令，之后删除它，并用focus（）设置插入符。

<$ p $ （$（$）$（$ {



$ b如果（document.getSelection（）！=）{
document.execCommand ）;
}
else {
//获取所选位置
var selObj = document.getSelection（）;
//获取所选位置的范围
var selRange = selObj.getRangeAt（0）;
//插入带有虚拟文本'd'的节点
var newNode = document.createTextNode（'d'）;
selRange.insertNode（newNode） ;
selObj.removeAllRanges（）;
selObj.addRang e（selRange）;

//对虚拟$执行命令
document.execCommand（'bold'）;

//从范围中删除虚拟
selRange.setStart（newNode，0）;
selRange.setEnd（newNode，1）;
selRange.deleteContents（）;

selObj.removeAllRanges（）;
selObj.addRange（selRange）;
//专注于空元素
$（'＃textcontent'）。focus（）;
}
}）;

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

I'm working on a specialized Text/HTML Editor with Javascript and JQuery in a contenteditable div. I implemented the different text styles (bold, italic,...) with execcommand. This seems to work only if the selected text is not empty. What is the best way to solve this problem?

Here an example of what I want to do with Text being the text in the editor, HTML being the corresponding html code and | being the cursor Position:

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

By pressing a "bold" button, the execcommand('bold')-command should be executed on the selected position and the caret should be placed inside the modified position.

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

This does not work. I found a Workaround by adding an text node containing a blank. This seems to work in Internet Explorer, but not in Firefox. Here a simple example:

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);        
    }
});

And the corresponding jsfiddle here: http://jsfiddle.net/andibioticum/3V7pK/

解决方案

I modified my workaround-solution by inserting a text node containing a letter, calling the execcommand on that node, deleting it afterwards and setting the caret with 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();
   }
});

See the fiddle here: http://jsfiddle.net/andibioticum/XJuRf/

这篇关于execcommand在空选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！