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

如何在on ok的Ckeditor表周围包装容器div

2 个答案: