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

时间:2019-06-10 11:03:08

标签: javascript ckeditor ckeditor4.x

当用户在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? 
    }
}

2 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:0)

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