如何将容器 div 包裹在 Ckeditor table onOk 周围

Question

当用户在 Ckeditor 上输入 table 时，我想用 class 将 div 包裹起来，但我找不到获得此 div 的方法=27=] HTML 元素。最好的方法是什么？

我尝试创建一个插件来扩展 table 对话框的 onOk 功能（参见代码）。这为我提供了 table 对话框中的所有属性，但我不想使用所有属性再次创建整个 table 元素，因为我不想重写现有的 table 插件.

我只需要获取此插件添加的代码并将其包装在 div 中。

我想在我的项目 javascript 中这样做，当页面加载时，获取所有 table 并将其包装在 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 事件而不是关闭对话框时，仅在添加 table 时才执行我需要的操作。

// 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);
    }
});

如何将容器 div 包裹在 Ckeditor table onOk 周围

How to wrap a container div around a Ckeditor table onOk

javascript

ckeditor

ckeditor4.x