Javascript 如何将容器div包装在Ckeditor表onOk上

当用户在Ckeditor上输入一个表时，我想用一个类在其周围加上一个div，但是我找不到一种方法来获取这个table HTML元素。最好的办法是什么

我尝试创建一个插件来扩展表对话框onOk函数（参见代码）。这给了我table对话框中的所有属性，但我不想用所有属性再次创建整个table元素，因为我不想重新编写现有的table插件

我只需要得到这个插件添加的代码，并将其包装在一个div中

我曾考虑在我的项目javascript中这样做，当页面加载时，获取所有表并将其包装在一个div中。然而，这似乎根本不是最好的方法。我想一定有办法通过Keckeditor

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? 
    }
}

---

我找到了答案，所以对于其他需要它的人，我就是这么做的： 我使用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);
}

---

我找到了答案，所以对于其他需要它的人，我就是这么做的： 我使用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);
}

---

对于“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);
    }
});

---

对于“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);
    }
});

---

也不要忘记传递的缓冲区-您可以这样处理：

（function（）{function wrapTable（data）{var val=data.replace（'也不要忘记传递的缓冲区-您可以这样处理：
（function（）{function wrapTable（data）{var val=data.replace（'