document.execCommand 不适用于 angularJS

Question

我有一个应用程序，我想在其中创建一个编辑区域，就像 Whosebug 上的这个应用程序一样。我不想使用 textAngular 指令，因为它太难理解了，所以我找到了这个 Javascript 函数，document.execCommand，它似乎正是我需要的。

问题是我无法在 AngularJs 中使用它。它没有给出任何错误，它只是什么都不做。

我有一个内容可编辑div:

<div contenteditable id="text"><h5>Select a part of this text!</h5></div>

一个粗体按钮：

<i class="fa fa-bold" ng-click="wrapBold()"></i>

和函数：

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

我试过 $document，我将其注入控制器，但随后出现错误

 TypeError: undefined is not a function at Scope.$scope.wrapBold

Answer 1

textAngular 实际上在内部使用 document.execCommand（我是维护者，仅供参考）。

您的代码非常正确，您面临的问题是，当您单击该按钮时，您丢失了 contenteditable 区域的 focus/selection，因此没有地方可以插入它。

根据记忆你必须做两件事；使带有 ng-click 的元素具有属性 unselectable="on" 并捕获并防止同一元素上的 mousedown 事件。下面是我们如何在 textAngular 中设置按钮：https://github.com/textAngular/textAngular/blob/ff8e48087f780d30f54e77b06f09e0b85f9517e9/src/taBind.js#L26-L39

$document 的问题在于您需要使用 $document[0] 来获取实际的 HTML DOM 元素才能调用 execCommand。

document.execCommand doesn't work in angularJS