angularlink

dialog.js

CKEDITOR.dialog.add('routerLinkDialog', function (editor) {
    return {
        // Basic properties of the dialog window: title, minimum size.
        title: 'Router Link Properties',
        minWidth: 200,
        minHeight: 100,
        // Dialog window content definition.
        contents: [
            {
                // Definition of the Basic Settings dialog tab (page).
                id: 'tab-basic',
                label: 'Basic Settings',
                // The tab content.
                elements: [
                    {
                        type: 'select',
                        id: 'link-select',
                        label: 'Link to',
                        requiredContent: 'a[routerLink]',
                        items: editor.config['angularlinkValues'],
                        commit: function (element) {
                            var select = this;
                            var items = this.items;
                            for (var i = 0; i < items.length; i++) {
                                var item = items[i];
                                if (item[1] === select.getValue()) {
                                    element.setText(item[0]);
                                }
                            }
                            element.setAttribute('routerLink', select.getValue());
                        },
                    }
                ]
            }
        ],
        onLoad: function () {
            // console.log(editor.config);
        },
        // Invoked when the dialog is loaded.
        onShow: function () {
            this.element = editor.document.createElement('a');
        },
        // This method is invoked once a user clicks the OK button, confirming the dialog.
        onOk: function () {
            // The context of this function is the dialog object itself.
            // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
            var dialog = this;
            // Create a new <abbr> element.
            var abbr = this.element;
            // Invoke the commit methods of all dialog window elements, so the <abbr> element gets modified.
            this.commitContent(abbr);
            // Finally, if in insert mode, insert the element into the editor at the caret position.
            editor.insertElement(abbr);
        }
    };
});

plugin.js

var AngularLinkPlugin = (function () {
    function AngularLinkPlugin() {
        this.hidpi = true;
        this.icons = 'routerLink';
    }
    AngularLinkPlugin.prototype.beforeInit = function (editor) {

        if (!editor.config['angularlinkValues']) {
            if (!!editor.config['angularlinkValuesFactory']) {
                console.log(editor.config);
                editor.config['angularlinkValuesFactory'].then(function (links) {
                    editor.config['angularlinkValues'] = links;
                    console.log(editor.config);
                });
            }
            else {
                throw new Error('No `angularlinkValues` or `angularlinkValuesFactory` in editor.config.');
            }
        }
        // console.log(editor.config);
    };
    AngularLinkPlugin.prototype.init = function (editor) {
        // console.log('init');
        // let command = new RouterLinkCommand(editor);
        // editor.addCommand('routerLink', command);
        // editor.addFeature(command);
        editor.addCommand('routerLink', new CKEDITOR.dialogCommand('routerLinkDialog', {
            allowedContent: 'a[routerLink]',
            requiredContent: 'a'
        }));
        editor.ui.addButton('routerLink', {
            label: 'Insert routerLink',
            command: 'routerLink',
            toolbar: 'insert'
        });
        // console.log(this.path);
        CKEDITOR.dialog.add('routerLinkDialog', 'https://gist.githubusercontent.com/gatimus/5cdf9043fd598a8a8033e023888a00b5/raw/e01dfff2890a2b8ee92bfee2194101c167e88850/dialog.js');
    };
    AngularLinkPlugin.prototype.afterInit = function (editor) {
        // console.log('after');
    };
    AngularLinkPlugin.prototype.onLoad = function () {
        // console.log('load');
    };
    return AngularLinkPlugin;
}());
CKEDITOR.plugins.add('angularlink', new AngularLinkPlugin());