Integrating AngularJS and tinyMCE

问题

See: http://jsbin.com/udayah/2/edit

Modifying the datamodel associated with the tinyMCE textarea throws a Javascript error:

"$digest already in progress"

In my app, unlike the JS Bin example, the text in tinyMCE does not change when I change the associated datamodel and the same error is thrown. I am using a couple other AngularUI directives, Codemirror and JQueryUI Dialogs, which may be complicating the issue.

回答1:

I think that textarea isn't actually TinyMCE's working copy of the text being edited, the editor just dumps the text in there every once in a while. So for a clean solution, you'll probably have to use TinyMCE's setContent and getContent methods.

回答2:

The "$digest already in progress" error no longer shows up in the console. I believe this issue was corrected in a newer version of AngularUI.

回答3:

This is my approach with angularJS, TinyMCE and Angular UI

Script Tags:

    <!-- JQUERY -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- JQUERY UI -->
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <!-- ANGULAR JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
    <!-- ANGULAR UI -->
    <script src="lib/angular-ui/angular-ui.js"></script>
    <!-- TINYMCE -->
    <script type="text/javascript" src="lib/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" src="lib/tiny_mce/tiny_mce_src.js"></script>

View:

<input type="text" ng-model="nota.fechaPub" ui-date ui-date-format required >
<textarea ui-tinymce="{theme:'simple'}" ng-model="nota.entradilla"></textarea>
...
<button ng-click="read()" class="btn btn-primary">Read</button>

Controller:

...
// Read the note function inside the controller
$scope.read= function () {
    var nota = $scope.nota;
    // In nota model I get two fields: entradilla (a text) and fechaPub ( a date)


}
...

回答4:

Two way bind with AngularJS and TinyMCE using angular-ui-tinymce

Plnkr: http://plnkr.co/edit/04AFkp?p=preview

Hope that helps :-)

来源：https://stackoverflow.com/questions/11953532/integrating-angularjs-and-tinymce

标签

tinymce

angularjs