CKEditor 4向链接添加新属性

Question

我想在链接模式菜单中添加一个复选框。我不明白如何保存更改。如果使用onOk方法，它将覆盖main方法。通过装饰器进行了尝试，但是this._. SelectedElement元素目前尚未定义。

    CKEDITOR.on( 'dialogDefinition', function( ev ) {

                    var dialogName = ev.data.name;
                    var dialogDefinition = ev.data.definition;
                    var link = ev.editor.getSelectedHtml().getHtml();

                    if ( dialogName === 'link' ) {
                        var infoTab = dialogDefinition.getContents( 'info' );
                        var checkbox = {
                            type: 'checkbox',
                            id: 'custom',
                            label: 'Add data attr',
                            setup: function (data) {
                                this.allowOnChange = false;

                                if (data.custom)
                                    this.setValue(data.custom);

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.custom = this.getValue()
                                this.allowOnChange = false;
                            }
                        }
                        infoTab.add(checkbox);
                    }

                    function decorator(func) {
                        return function() {
                            var attributes = {}
                            var data = {}
                            var editor = this.getParentEditor();
                            this.commitContent(data);
                            if (data.custom)
                                attributes["custom-attribute"] = "button";
                            else
                                attributes["custom-attribute"] = "";
                            var element = this._.selectedElement // not init
                            element.setAttributes(attributes);
                            func.apply(this, arguments);
                        };
                    }
                    dialogDefinition.onOk = decorator(dialogDefinition.onOk)

   });

Answer 1

    function decorator(func) {
        return function() {
            func.apply(this, arguments);
            var data = {}
            this.commitContent(data);


            var editor = this.getParentEditor();
            var anchor = editor.getSelection().getSelectedElement()
            if (!anchor) {
                anchor = document.querySelector('.cke_wysiwyg_frame').contentWindow.getSelection().focusNode
            }
            if (data.testId) {
                anchor.setAttribute('data-test','true')
            } else {
                anchor.removeAttribute('data-test')
            }

        };
    }

    CKEDITOR.on( 'dialogDefinition', function( ev ) {

        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        if ( dialogName === 'link' ) {
            var infoTab = dialogDefinition.getContents( 'info' );
            var checkbox = {
                type: 'checkbox',
                id: 'testId',
                label: 'Test',
                setup: function (data) {
                    this.allowOnChange = false;
                    var el = ev.editor.getSelectedHtml();
                    let a = el.$.childNodes[0]
                    if (a.getAttribute('data-test')){
                        this.setValue('checked')
                    }
                    this.allowOnChange = true;
                },
                commit: function (data) {
                    data.testId = this.getValue()
                    this.allowOnChange = false;
                }
            }
            infoTab.add(checkbox);
            dialogDefinition.onOk = decorator(dialogDefinition.onOk)
        }

还允许在CKeditor配置中添加属性