Как обернуть контейнерный контейнер вокруг стола Ckeditor onOk

Question

Когда пользователь входит в таблицу в Ckeditor, я хочу обернуть ее div классом, но не могу найти способ получить этот HTML-элемент этой таблицы.Каков наилучший способ сделать это?

Я попытался создать плагин, чтобы расширить диалог таблицы с помощью функции onOk (см. Код).Это дает мне все свойства из диалогового окна таблицы, но мне не нужно снова создавать элемент таблицы целиком со всеми свойствами, поскольку я не хочу переписывать существующий плагин таблицы.

Мне просто нужно получить код, который добавляет этот плагин, и обернуть его в div.

Я думал об этом в javascript моих проектов, когда страница загружается, получает все таблицы и упаковывает их в div.Тем не менее, это не лучший способ сделать это вообще.Я думал, что должен быть способ через ckeditor?

CKEDITOR.plugins.add( 'responsivetables', {
    // The plugin initialization logic
    init: function(editor) {
        vsAddResponsiveTables(editor);
    }
});

function vsAddResponsiveTables(editor){
    CKEDITOR.on( 'dialogDefinition', function( ev ) {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        if ( dialogName == 'table') {
           addTableHandler(dialogDefinition, editor);
        }
    });
}

function addTableHandler(dialogDefinition, editor){
    dialogDefinition.onOk = function (a) {
        // get table element and wrap in div? 
    }
}

Answer 1

Я нашел ответ для всех, кому это нужно, вот что я сделал: Я использовал событие insertElement вместо закрытия диалогового окна, делая только то, что мне нужно, если это добавляемая таблица.

// Register the plugin within the editor.
CKEDITOR.plugins.add( 'responsivetables', {
    // The plugin initialization logic goes inside this method.
    init: function(editor) {
        vsAddResponsiveTables(editor);
    }
});

function vsAddResponsiveTables(editor){ 
    // React to the insertElement event.
    editor.on('insertElement', function(event) {
        if (event.data.getName() != 'table') {
            return;
        }

        // Create a new div element to use as a wrapper.
        var div = new CKEDITOR.dom.element('div').addClass('table-scroll');

        // Append the original element to the new wrapper.
        event.data.appendTo(div);

        // Replace the original element with the wrapper.
        event.data = div;
    }, null, null, 1);
}

Answer 2

К предыдущему ответу от 'gemmalouise' нужно добавить еще одну строку кода

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'responsivetables';
}

В противном случае это не сработает (я не могу указать это в комментарии, поскольку не хватает 50 репутации).И более компактный код этого функционального:

CKEDITOR.plugins.add('responsivetables', {
    init: function (editor) {
        editor.on('insertElement', function (event) {
            if (event.data.getName() === 'table') {
                var div = new CKEDITOR.dom.element('div').addClass('table-scroll'); // Create a new div element to use as a wrapper.
                div.append(event.data); // Append the original element to the new wrapper.
                event.data = div; // Replace the original element with the wrapper.
            }
        }, null, null, 1);
    }
});