document.execCommand在angularJS中不起作用

Question

I have an application where I want to make an editing area, just like this one on StackOverflow. 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.

The problem is that I can't make it work in AngularJs. It's not giving any error, it just doesn't do anything.

I have a content editable 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

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

Answer 1

textAngular actually uses document.execCommand internally (I'm the maintainer 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.

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

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.