3

我正在创建一个包含 tinymce 4 编辑器的自定义 AngularJS 指令。当我尝试从一组其他 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);

（依次调用这两行就可以了）

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

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

4

1 回答 1

1

你真的必须使用 AngularJS 来完成这个原本非常简单的事情吗 - 如果是这样，你将不得不尝试使用类似的东西提取编辑器内容

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

并确保在将其放回之前丢弃正确的内容

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

一旦你添加了编辑器。

于 2013-07-12T12:12:12.960 回答