angularjs 中的 CKEditor 自定义插件

Question

我在 AngularJS 中使用 CKEditor 4，并且我之前为 CKEditor 创建了自定义插件，但我无法访问 angularjs 中的范围。涉及的部分有：

The ckeditor directive - creates an attribute and binds to model

The controller for the directive

The plugin code - which needs to run something in the controller

我在第三部分遇到了问题。这是代码。首先是指令

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);
}

angularjs 中的 CKEditor 自定义插件

CKEditor custom plugin in angularjs

javascript

ckeditor

angularjs

ckeditor4.x