Integrating AngularJS and tinyMCE

Question

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.

You'll have to view the Javascript Console to see the error pop up. — disperse
– disperse, Commented Aug 14, 2012 at 14:41
Damn, stupid me. :( Just for anyone's information: the error is gone when ui module is not specified as a demoApp dependency. Will try to investigate further, though... — raina77ow
– raina77ow, Commented Aug 14, 2012 at 15:19
I figured out why the content wasn't updating in my app, separate issue. The error, however, still appears in the console. — disperse
– disperse, Commented Aug 14, 2012 at 17:16

mb21 · Accepted Answer · 2012-09-11 03:46:40Z

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.

answered Sep 11, 2012 at 3:46

community wiki

mb21

Sign up to request clarification or add additional context in comments.

1 Comment

John Doe Over a year ago

Yes! This is the simplest and nimblest way! I see all these intricate custom directives and third-party plugins that have to be integrated - often with bugs.

disperse · Accepted Answer · 2014-03-19 18:40:54Z

1

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.

answered Mar 19, 2014 at 18:40

disperse

1,3141 gold badge11 silver badges22 bronze badges

Comments

rtrujillor · Accepted Answer · 2013-03-25 16:17:14Z

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)


}
...

Paul B. Hartzog · Accepted Answer · 2014-02-21 17:20:28Z

0

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

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

Hope that helps :-)

answered Feb 21, 2014 at 17:20

Paul B. Hartzog

3413 silver badges6 bronze badges

Collectives™ on Stack Overflow

Integrating AngularJS and tinyMCE

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related