Search code examples
javascriptpluginscolorsckeditorcell

How to fill the entire cell with a color in CKEditor

I created a plugin that allows me to put a background color in a table cell in 1 click. The problem is that I do not know how to make the whole cell colored.

Here is the code of my plugin.

CKEDITOR.plugins.add( 'TrameF', { //meme nom que le dossier associé
    init: function( editor ) {

        editor.addCommand( 'TrameF', {
            exec: function( editor ) {
                
                editor.insertHtml( '<p style=" background-color : #BCE0EA;">'+
                    ' </p> ');
            }
         });
    }
});

and this is my result :

Can someone help me ? Thanks, have a good day.

Solution

  • You need to get the <td> element and set its style. To do that, you need to traverse backwards the DOM from the point you clicked:

    var el = editor.getSelection().getStartElement();
while (el) {
    if (el.getName() == 'td' || el.getName() == 'th') {
        el.setStyle('background-color', '#BCE0EA');
        break;
    }
    el = el.getParent();
}