I have an application where I want to make an editing area, just like this one on *. I don't want to use the textAngular directive, because it's too hard to understand, so I found about this Javascript function, document.execCommand, which it seems to be exactly what I need.
我有一个应用程序，我想创建一个编辑区域，就像*上的这个。我不想使用textAngular指令，因为它太难理解了，所以我找到了这个Javascript函数，document。执行命令，这似乎正是我所需要的。
The problem is that I can't make it work in AngularJs. It's not giving any error, it just doesn't do anything.
问题是我不能让它在AngularJs中工作。它没有给出任何错误，它什么都不做。
I have a content editable div:
我有一个内容可编辑的div:
<div contenteditable id="text"><h5>Select a part of this text!</h5></div>
a Bold button:
一个大胆的按钮:
<i class="fa fa-bold" ng-click="wrapBold()"></i>
and the function:
和功能:
$scope.wrapBold = function() {
document.execCommand('bold', false, null);
};
I have tried with $document, which I injected in the controller, but then it gives me an error saying
我尝试了$document，我将它注入控制器，但它给了我一个错误的值
TypeError: undefined is not a function at Scope.$scope.wrapBold
1 个解决方案
#1
3
textAngular actually uses document.execCommand internally (I'm the maintainer FYI).
textAngular实际使用文档。在内部执行execCommand(我是维护者FYI)。
Your code is pretty much correct, the problem you are facing is that when you click on that button you loose the focus/selection of the contenteditable area, so it has no where to insert it.
您的代码非常正确，您面临的问题是，当您单击该按钮时，您失去了contenteditable区域的焦点/选择，因此它没有插入的位置。
From memory you have to do two things; Make the element with the ng-click on it have the attribute unselectable="on" and also catch and prevent the mousedown event on the same element. Here's how we setup the buttons in textAngular: https://github.com/textAngular/textAngular/blob/ff8e48087f780d30f54e77b06f09e0b85f9517e9/src/taBind.js#L26-L39
根据记忆，你必须做两件事;使使用ng-click的元素具有属性不可选的="on"，并捕获和防止在同一元素上的mousedown事件。以下是我们在textAngular中的按钮设置方法:https://github.com/textangular/textangular/textangular/blob/ff8e48087f780d780d30f54e77b06f06f09e0b85f9517e9 / src/tabind.js #L26-L39
The problem with $document is that you need to use $document[0] to get the actual HTML DOM element to be able to call execCommand.
$document的问题是，您需要使用$document[0]来获取实际的HTML DOM元素，以便能够调用execCommand。
#1
3
textAngular actually uses document.execCommand internally (I'm the maintainer FYI).
textAngular实际使用文档。在内部执行execCommand(我是维护者FYI)。
Your code is pretty much correct, the problem you are facing is that when you click on that button you loose the focus/selection of the contenteditable area, so it has no where to insert it.
您的代码非常正确，您面临的问题是，当您单击该按钮时，您失去了contenteditable区域的焦点/选择，因此它没有插入的位置。
From memory you have to do two things; Make the element with the ng-click on it have the attribute unselectable="on" and also catch and prevent the mousedown event on the same element. Here's how we setup the buttons in textAngular: https://github.com/textAngular/textAngular/blob/ff8e48087f780d30f54e77b06f09e0b85f9517e9/src/taBind.js#L26-L39
根据记忆，你必须做两件事;使使用ng-click的元素具有属性不可选的="on"，并捕获和防止在同一元素上的mousedown事件。以下是我们在textAngular中的按钮设置方法:https://github.com/textangular/textangular/textangular/blob/ff8e48087f780d780d30f54e77b06f06f09e0b85f9517e9 / src/tabind.js #L26-L39
The problem with $document is that you need to use $document[0] to get the actual HTML DOM element to be able to call execCommand.
$document的问题是，您需要使用$document[0]来获取实际的HTML DOM元素，以便能够调用execCommand。