document.execCommand在angularJS中不起作用

Question

我有一个应用程序，我想创建一个编辑区域，就像StackOverflow上的这个。我不想使用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（我是维护者FYI）。

您的代码非常正确，您遇到的问题是，当您单击该按钮时，您会忽略可信区域的焦点/选择，因此无法插入它。

从记忆中你必须做两件事;使用ng-click对其进行元素具有属性unselectable="on"，并捕获并阻止同一元素上的mousedown事件。以下是我们在textAngular中设置按钮的方法：https://github.com/textAngular/textAngular/blob/ff8e48087f780d30f54e77b06f09e0b85f9517e9/src/taBind.js#L26-L39

$ document的问题是你需要使用$ document [0]来获取能够调用execCommand的实际HTML DOM元素。