集成AngularJS和tinyMCE

时间:2012-08-14 13:39:14

标签: tinymce angularjs

请参阅:http://jsbin.com/udayah/2/edit

修改与tinyMCE textarea关联的数据模型会引发Javascript错误:

“$ digest已在进行中”

在我的应用程序中,与JS Bin示例不同,当我更改关联的数据模型并且抛出相同的错误时,tinyMCE中的文本不会更改。我正在使用其他几个AngularUI指令,Codemirror和JQueryUI Dialogs,这可能会使问题复杂化。

4 个答案:

答案 0 :(得分:1)

我认为textarea实际上并不是TinyMCE正在编辑的文本的工作副本,编辑器每隔一段时间就会将文本转储到那里。因此,对于一个干净的解决方案,您可能必须使用TinyMCE的setContentgetContent方法。

答案 1 :(得分:1)

" $摘要已在进行中"错误不再显示在控制台中。我相信这个问题在较新版本的AngularUI中得到了纠正。

答案 2 :(得分:0)

这是我使用angularJS,TinyMCE和Angular UI的方法

脚本标签:

    <!-- 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>

查看:

<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>

控制器:

...
// 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)


}
...

答案 3 :(得分:0)

使用angular-ui-tinymce

双向绑定AngularJS和TinyMCE

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

希望有所帮助: - )