JSFiddle + TinyMCE + AngularJS

Question

我在JSFiddle的angular指令中使用tinymce API时遇到了一个问题。这是tinymce编辑器初始化好的example，在浏览器控制台中没有错误。但是如果我尝试获取tinymce Editor的一个实例，我会得到'undefined‘。问题是:为什么tinymce.get(id);会导致undefined

HTML：

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <my-editor ng-model="text"></my-editor>
    </div>
</div>

JS：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

});
app.directive('myEditor', function () {
    var uniqueId = 0;
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: true,
        template: '<textarea></textarea>',
        link: function (scope, element, attrs, ngModel) {
            var id = 'myEditor_' + uniqueId++;
            element.find('textarea').attr('id', id);
            tinymce.init({
                selector: '#' + id
            });

            var editor = tinymce.get(id);
            alert(editor); **// why is this undefined?**
        }
    }
});

我还尝试过JSFiddle的框架和扩展部分中的选项。但没有成功。

Answer 1

您正在处理的问题是，当您执行警告时，元素没有被附加到dom中。(查看firebug中的html )

<my-editor ng-model="text" class="ng-scope ng-pristine ng-valid">
    <textarea id="myEditor_0"></textarea>
</my-editor>

将警报放在setTimeout中将允许您对对象执行alert()操作。

setTimeout(function(){
     var editor = tinymce.get(id);
     alert(editor); // why is this undefined?
},0);

Answer 2

正确的方法是在tinyMCE.init中设置init_instance_callback option，如果使用的是tinymceOptions，则在angular-ui-tinymce中设置：

$scope.tinymceOptions = {
  init_instance_callback : function(editor) {
     MyCtrl.editor=editor
     console.log("Editor: " + editor.id + " is now initialized.");
     editor.on('Change', function(editor, e) {
        MyCtrl.func()
     });             
}

Answer 3

除了马克给出的答案之外：

您需要等待编辑器初始化并准备好使用。为此，您可以使用onInit tinymce处理程序。当编辑器准备好时，onInit就会被激活。