angularjs中的CKEditor自定义插件

Question

我在AngularJS中使用了CKEditor 4，并且之前为CKEditor创建了自定义插件，但是在访问angularjs中的范围时遇到了麻烦。 涉及的部分包括：

1. ckeditor指令-创建属性并绑定到模型
2. 指令的控制器
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' });
    }
});
})();

有什么建议么？

Answer 1

我从来没有为发布的场景找到解决方案，但确实找到了一种在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);
}