Question

我正在创建一个自定义的AngularJS指令，它包含一个tinymce 4编辑器。当我试图从一组其他的编辑中删除一个tinymce编辑器时，问题出现了。请检查demo。这里尝试删除第一个或第二个编辑器，然后编辑器坏了。

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会删除每个后续编辑器并将其再次附加到已删除编辑器的位置（内部角度调用jQuery .after()）。并且

一次在某些浏览器中保留iframe内容是不可能的从文档/窗口卸载的dom中删除节点

（取自here）。

要修复损坏的编辑器，我应该致电：

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

（一个接一个地调用这两行）

我应该把这些重新初始化的线放在哪里？调用这些线的适当角度方式是什么？

N.B。我也可能切换到不依赖于iframe的tinymce编辑器的内联模式。但这会带来很大的不便：编辑器中的样式将与页面中的样式相交。因此，不接受此选项。

Answer 1

你是否真的必须使用AngularJS这个非常简单的事情 - 如果是这样你将不得不尝试用类似

的东西来提取编辑器内容

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

并确保在放回

之前丢弃正确的内容

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

一旦你添加了编辑器。

从编辑集中删除tinymce 4编辑器

1 个答案: