How to wrap a container div around a Ckeditor table onOk

59
June 10, 2019, at 6:00 PM

When a user enters a table on the Ckeditor, I want to wrap a div around it with a class but I can't find a way to get this table HTML element. What is the best way to go about it?

I've tried creating a plugin to extend the table dialog onOk function (see code). This gives me all the properties from the table dialog but I don't want to have to create the whole table element again with all the properties as I don't want to re-write the existing table plugin.

I just need to get the code this plugin adds and wrap it in a div.

I thought about doing it in my projects javascript, when page loads, get all tables and wrap it in a div. However, this doesn't seem like the best way to do it at all. I thought there must be a way via 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

I found the answer so for anyone else that needs it, this is what I did: I used the insertElement event instead of when dialog was closed, only doing what I need if its a table that's being added.

// 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);
}
READ ALSO
dynamically created controls vanish after reloading page also i need to bind database to those dynamic control

dynamically created controls vanish after reloading page also i need to bind database to those dynamic control

i want to create controls dynamically which persist even after reloading webpage in javascriptalso i need to bind those controls to my Database javascript,asp

38
responsive hamburger navbar not functioning in django base.html

responsive hamburger navbar not functioning in django base.html

I am developing simple blogging site, the problem I am facing is my navbar is not responsive, below is my navbar seen in desktop

59
Do we really have to OOPsify everything in TypeScript?

Do we really have to OOPsify everything in TypeScript?

I have joined a new company and here they have created classes for just about everything, even for the unrelated utility functions

62
I want to reverse the function [on hold]

I want to reverse the function [on hold]

I want to reverse this functionOn default, it's set to editmode=off and the function turns it on

35