JSFiddle + TinyMCE + AngularJS

У меня возникла проблема с использованием API tinymce внутри директивы angular в JSFiddle. Вот пример. Редактор tinymce инициализируется просто отлично, в консоли браузера нет ошибок. Но я получаю «неопределенный», если пытаюсь получить экземпляр редактора tinymce. Вопрос: почему 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?**
        }
    }
});

Я также играл с опциями в разделе Frameworks & Extensions JSFiddle. Но безуспешно.


angularjs tinymce tinymce-4 jsfiddle
person Raman Chodźka    schedule 08.07.2013    source источник
comment
возможный дубликат Подождите, пока TinyMCE загрузится   -  person Flint    schedule 28.11.2014

Ответы (3)


arrow_upward
2
arrow_downward

Вы имеете дело с проблемой, когда элементы не были добавлены в дом, когда вы делаете свое предупреждение. (посмотрите на html в firebug)

<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);
person Mark Coleman    schedule 08.07.2013

arrow_upward
1
arrow_downward

Правильный способ — установить параметр init_instance_callback в tinyMCE.init или в 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()
     });             
}
person Flint    schedule 28.11.2014
comment
Большое спасибо, просматривая Интернет, чтобы получить этот редактор в angular, чтобы вызвать функцию uploadImages, и потратил на это огромное время. - person rohanagarwal; 05.07.2017

arrow_upward
0
arrow_downward

В дополнение к ответу Марк дал:

Вам нужно будет дождаться инициализации редактора и его готовности к использованию. Для этого вы можете использовать обработчик tinymce onInit. onInit запускается, когда редактор готов.

person Thariama    schedule 25.07.2013