Измените диалог ссылки CKEditor, чтобы добавить собственный атрибут к ссылкам

Я использую CKEditor на веб-сайте, и мне нужно иметь возможность добавлять специальные атрибуты данных для некоторых ссылок, созданных с помощью редактора. Пользователь должен указать, что им нужен специальный атрибут, помещенный в ссылку, установив флажок в диалоговом окне ссылки. Мне удалось добавить галочку в диалоговом окне ссылки со следующим кодом:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == "link") {
        var info = dialog.getContents("info");
        info.elements.push({
            type: "vbox",
            id: "urlOptions",
            children: [{
                type: "hbox",
                children: [{
                    id: "button",
                    type: "checkbox",
                    label: "Button",
                    commit: function(data) {
                        data.button = this.getValue()
                        console.log("commit", data.button, data);
                    },
                    setup: function(data) {
                        this.setValue(data.button);
                        console.log("setup", data.button, data);
                    }
                }]
            }]
        });
    }
});

Теперь у меня две проблемы. Первый заключается в том, что, несмотря на то, что я добавил код в функции commit и setup, который должен сохранить состояние флажка, он не работает. Как будто data не может содержать никаких других параметров, кроме тех, которые есть по умолчанию.

Вторая проблема заключается в том, что я не знаю, как добавить/удалить атрибут data на моих ссылках. Мне кажется, что я должен делать это в обратном вызове onOk в диалоговом окне, однако диалог ссылок уже имеет обратный вызов onOk, поэтому я не уверен, как я должен продолжать. Я, конечно, не хочу напрямую изменять файлы CKEditor.

Как я могу выполнить эти вещи?

Ответ 1

Лучше всего изменить плагин. Поэтому вам нужно открыть исходный код и найти файл links.js в c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

Исходный код довольно большой (40k), но здесь вы можете изменить диалоговое окно, как хотите. Когда вы закончите только скопировать его в свою папку плагинов и сжимаете его: http://jscompress.com/

Я сделал то, что вам нужно. Весь несжатый файл находится здесь: https://gist.github.com/3940239

Что вам нужно сделать:

Сначала добавьте эту строку непосредственно перед добавлением кнопки "просмотр". Прибл. в строке: 547:

                        {
                            id: "button",
                            type: "checkbox",
                            label: "Button",
                            setup: function (data) {
                                this.allowOnChange = false;

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

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.button = this.getValue()
                                this.allowOnChange = false;
                            }
                        },

Эта часть на самом деле является вашим кодом. Я просто скопировал и вложил его.

Затем перейдите к функции onOk, прибл. в строке 1211: и после commitContent добавьте этот код:

this.commitContent( data );

//My custom attribute
if (data.button)
    attributes["custom-attribute"] = "button";
else
    attributes["custom-attribute"] = "";

Это изменит вашу ссылку, добавив атрибут к элементу, например <a href="#" custom-attribute="button">text</a>

Что это. Хотя, вы также можете загрузить текущий статус флажка. Затем перейдите к функции parseLink. Прибл. строка 179 для загрузки атрибутов:

...
if ( element )
{
    retval.button = element.getAttribute('custom-attribute');

    var target = element.getAttribute( 'target' );
...

Ответ 2

Я изучаю то же самое сейчас. То, что я решил сделать в этот момент, состоит в следующем:

Получить базовую установку ckeditor без плагина ссылки
создайте мою собственную вилку плагина ссылки и добавьте в нее мои изменения, затем активируйте и используйте этот плагин внутри группы, в которой обычно отображается ссылка.

... работа с ним как пользовательский плагин (пусть и копия оригинала) должна облегчить проблему обновления. Вы просто не используете оригинальный плагин ссылок вообще. Скопируйте и переименуйте его и используйте вместо него свою собственную копию.