如何在 Ok 上将容器 div 包裹在 Ckeditor 表周围

Question

当用户在 Ckeditor 上输入一个表时，我想用一个类环绕它，但我找不到获取这个表 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);
    }
});