CKEditor пользовательский плагин в angularjs - PullRequest
0 голосов
/ 05 сентября 2018

У меня есть CKEditor 4, работающий в AngularJS, и я ранее создал собственные плагины для 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' });
    }
});
})();

Есть предложения?

1 Ответ

0 голосов
/ 07 сентября 2018

Я так и не нашел решение для сценария, который я разместил, но я нашел способ сделать это, который работает в 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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...