angularjs中的CKEditor自定义插件

Posted 2021-04-11

我有CKEditor 4在AngularJS中工作，我之前为CKEditor创建了自定义插件但是我在访问angularjs中的范围时遇到了问题。涉及的部分是：

1. ckeditor指令 - 创建属性并绑定到模型
2. 指令的控制器
3. 插件代码 - 需要在控制器中运行一些东西

我在第3部分遇到了麻烦。这是代码。首先是指令

function ckeditor() {
    return {
        controller: htmlEditorCtrl,
        controllerAs: 'htmlEditorCtrl',
        bindToController: true,
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            editorOptions = {...
                extraPlugins: 'help'
            }
            var ckeditor = element.ckeditor(editorOptions);
            //ckeditor.setData = ngModel.$modelValue;

            // update ngModel on change
            ckeditor.editor.on('change', function () {
                ngModel.$setViewValue(this.getData());
            });
        }
    }
}

然后一个简单的控制器

HTMLEditorCtrl.$inject = ["$scope", "$rootScope"];
function HTMLEditorCtrl($scope, $rootScope) {
    var vm = this;
    vm.openHelp = openHelp;

    function openHelp() {
        var x = 1;
        // HERE'S where I want to do stuff
    }
}

和插件 - 它工作，并在一个单独的文件中，除了我找不到一种方法来触发控制器功能。

(function () {
var cmd = {
    canUndo: false, 
    exec: function (editor) {
        alert("open help");  // works
        // none of these references work
        var x = $scope;
        var x = $rootScope;
        var x = vm;
        ...
    }
};

CKEDITOR.plugins.add('help', {
    icons: 'help',
    init: function (editor) {
        // this fires when the editor loads
        editor.addCommand('help', cmd);
        editor.ui.addButton('help', { label: 'Help', command: 'help', toolbar: 'help' });
    }
});
})();

有什么建议？

答案

我从来没有为我发布的场景找到解决方案，但我确实找到了一种在angularjs中工作的方法。基本上，插件文件代码必须移动到指令。所以在初始化编辑器实例的代码之前我添加了...

if (!CKEDITOR.plugins.registered['help']) {
    CKEDITOR.plugins.add('help', {
        icons: 'help',
        init: function (editor) {
            editor.addCommand('help', {
                exec: function (editor) {
                    scope.htmlEditorCtrl.openHelp();
                }
            });
            editor.ui.addButton('help', { label: 'Help', command: 'help', toolbar: 'help' });
        }
    });
}

然后在编辑器选项中我包含extraPlugins ='help'

只是为了在指令开始时做好准备，我添加了一些清理

for (name in CKEDITOR.instances) {
    CKEDITOR.instances[name].destroy(true);
}