Question

在创建我自己的迷你/简化文本编辑器的过程中，我遇到了使用execCommand的问题。我不知道为什么我的代码不起作用。我试图阻止mousedown事件并使用属性＆＃34; unsetectable =＆＃34; on＆＃34; ＆＃34;但它似乎仍然无法奏效。

这是我的代码：

<button type="button" class="btn btn-default" ng-click="makeBold()" unselectable="on" ng-mousedown="$event.stopPropagation()">B</button>

和

$scope.makeBold = function(){
    document.execCommand('bold',false,null);
};

感谢任何帮助，谢谢！

Answer 1

execCommand适用于当前选择。单击按钮（实际上是文本输入之外的任何位置）时，将取消选择当前选定的文本。此代码的目的是恢复contentEditable的选择。如果当前没有选择任何内容，则也是如此，那么至少需要恢复插入位置（这是一个长度为0个字符的选择）。

首先，您需要在每次用户更改选择时存储所选范围（在我的情况下，在keyup和mouseup上）：

this.textInput.onmouseup = this.textInput.onkeyup = function(){
    this.updateSelection();
    this.updateStatus();
}.bind(this);

为此目的将选择范围存储在数组中：

this.updateSelection = function(){
    this.selection = [];
    var sel = this.getSelection();
    for(var i=0; i<sel.rangeCount; i++)
        this.selection.push(sel.getRangeAt(i).cloneRange());
};

在执行命令之前，恢复选择：

this.reselect = function(){
    var sel = this.getSelection();
    sel.removeAllRanges();
    for(var i=0; i<this.selection.length; i++)
        sel.addRange(this.selection[i].cloneRange());
};

this.reselect();
document.execCommand("bold");

this.getSelection被定义为（虽然承认有点粗鲁）：

return window.getSelection ? window.getSelection() : 
(document.getSelection ? document.getSelection() :
document.documentElement.getSelection() );

我假设你有一个contentEditable，而不仅仅是一个简单的textarea。

＆＃34;将execCommand＆＃34;没有使用AngularJS

1 个答案: