Удалить редактор tinymce 4 из набора редакторов

Я создаю пользовательскую директиву AngularJS, которая обертывает редактор tinymce 4. Проблема возникает, когда я пытаюсь удалить редактор tinymce из набора других редакторов tinymce. Пожалуйста, посмотрите демонстрацию. Вот попробуйте удалить первый или второй редактор, а следующие редакторы ломаются.

JS:

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

app.controller('MainCtrl', function($scope) {
    $scope.editors = [{}, {}, {}];
    $scope.removeEditorByIndex = function (index) {
        $scope.editors.splice(index, 1);
    };
});
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
            });

            //where in AngularJS should I place the following lines?
            //tinyMCE.execCommand('mceRemoveEditor', false, id);
            //tinyMCE.execCommand('mceAddEditor', false, id);
        }
    }
});

HTML:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        Try removing the first editor. You will see that next editors become unusable.
        <div ng-repeat="editor in editors">
            <button ng-click="removeEditorByIndex($index)">Remove editor #{{$index + 1}}</button>
            <my-editor ng-model="text"></my-editor>
        </div>
    </div>
</div>

Причина этого в том, что после удаления элемента из $scope.editors angular удаляет каждый последующий редактор и снова добавляет его на место удаленного редактора (внутренне angular вызывает jQuery .after()). А также

В некоторых браузерах невозможно сохранить содержимое iframe, поскольку после удаления узла из dom документ/окно выгружается.

(взято из здесь).

Чтобы исправить сломанный редактор, я должен позвонить:

tinyMCE.execCommand('mceRemoveEditor', false, id);
tinyMCE.execCommand('mceAddEditor', false, id);

(достаточно вызвать эти две строки одну за другой)

Где я должен поместить эти строки повторной инициализации? Каков правильный угловатый способ вызова этих строк?

Н.Б. Я также могу переключиться на встроенный режим редактора tinymce, который не зависит от iframe. Но это принесет большое неудобство: стили из редактора будут пересекаться со стилями со страницы. Поэтому этот вариант неприемлем.


person Raman Chodźka    schedule 09.07.2013    source источник
comment
Эй, так что у меня есть своего рода ортогональный ответ, если вы хотите, чтобы я его опубликовал. Я нашел угловую оболочку/директиву для CKEditor, которая, на мой взгляд, в любом случае немного лучше, чем TinyMCE, если вы хотите, я могу поделиться кодом (хотя не уверен, что у меня есть исходная ссылка/ссылка).   -  person shaunhusain    schedule 10.07.2013
comment
Я предполагаю, что две строки должны быть вызваны в функции удаления. Сложная часть будет проходить в id.   -  person rGil    schedule 10.07.2013
comment
@shaunhusain похоже, что CKEditor тоже использует iframe. ckeditor.com/demo   -  person Raman Chodźka    schedule 10.07.2013
comment
@rGil хорошая идея. Я мог бы установить кэш идентификаторов редакторов, которые все еще присутствуют на странице. Быстрое доказательство концепции jsfiddle.net/RamanChodzka/a8dUp/68   -  person Raman Chodźka    schedule 10.07.2013
comment
Вы можете запустить tinyMCE в встроенном режиме, зачем использовать фреймы, если вам это не нужно?   -  person Christoffer Bubach    schedule 12.07.2013
comment
Кроме того, это лучше работает, например, в FF: tinyMCE.editors[id].execCommand('mceRemoveEditor', false, id);   -  person Christoffer Bubach    schedule 12.07.2013
comment
@ChristofferBubach В своем вопросе я объяснил, почему встроенный режим мне не подходит. Использование встроенного режима может привести к конфликту стилей.   -  person Raman Chodźka    schedule 12.07.2013
comment
@ChristofferBubach, не могли бы вы объяснить, почему tinyMCE.editors[id].execCommand('mceRemoveEditor', false, id); лучше работает в FF?   -  person Raman Chodźka    schedule 12.07.2013
comment
Ох, хорошо. Ну не знаю почему, но без него в ФФ ничего не происходит. Я думаю, вы должны указать, какой редактор вы хотите выполнить вызов execCommand.   -  person Christoffer Bubach    schedule 12.07.2013


Ответы (1)


Вам действительно нужно использовать AngularJS для этой довольно простой вещи - если это так, вам придется попытаться извлечь содержимое редактора с помощью чего-то вроде

content[] = tinymce.get(id).getContent();

и не забудьте удалить правильный контент, прежде чем возвращать его с помощью

tinymce.get(id).setContent(content[i]);

как только вы добавите редактор обратно.

person Christoffer Bubach    schedule 12.07.2013
comment
Проблем с контентом нет. Он хранится в $scope. Проблема в том, что редакторы ломаются (в FF 8.0.1 редакторы тоже ломаются) - это из-за выгрузки фреймов. Поэтому, чтобы исправить редакторы, я должен их повторно инициализировать. Вопрос в том, в какое место в директиве AngularJS нужно поместить эти строки повторной инициализации. - person Raman Chodźka; 12.07.2013
comment
Разве AngularJS не меняет идентификатор области видимости, когда вы ее соединяете? Если да, то как он может сопоставить содержимое со старым редактором. Я пробовал много вариантов вашего кода, и в лучшем случае я могу повторно инициализировать с правильным содержимым, но старые сломанные редакторы также будут отображаться ниже или выше рабочего. Поэтому я думаю, что вам может понадобиться переназначить идентификатор редактора с идентификатором области, прежде чем вы сможете повторно инициализировать. или, может быть, я должен просто сдаться и посмотреть, может ли кто-то другой с реальным знанием AngularJS помочь вместо этого - person Christoffer Bubach; 12.07.2013
comment
На самом деле, rGil подсказал, где мне разместить строки повторной инициализации. И я обновил свой jsfiddle jsfiddle.net/RamanChodzka/a8dUp/68. Проверьте комментарии под моим вопросом. Похоже скрипка работает. - person Raman Chodźka; 13.07.2013
comment
действительно, это, кажется, работает нормально. немного раздражает меня, так как я пробовал что-то подобное в качестве одной из моих первых попыток. :П - person Christoffer Bubach; 15.07.2013