How to add css class on click of CKeditor table button?

Question

We are using the CKEditor module provided from Drupal 8 (v8.6.2). There is a need to add a css class to the table when it is added to the Body field (text formatted, long) after someone clicks on the table button without having to modify the table via Source button.

How would we add a css class to the table after clicking the CKEditor table button?

The goal is to be able to do this without a module. If it comes down to it, we can review the module, but prefer to use any out of the box functionality. Another goal is to be able to do this on D8.

Answer 1

You can add copies of: ckeditor.styles.js ckeditor.config.js to your theme directory

You can add a class using jQuery addClass

Be sure to set custom JS path under directory CKEDITOR profile settings.

*This was method under D7

D8 Option 1: You use this editor_js_settings hook to adjust ckeditor settings. A full list of settings can be found [here][3]

Option 2: Target item using jQuery addClass in the themes or custom module sites scripts.js file

Option 3: Create a custom module based on a copy of CKEDITOR module with a class added where you need it, or create a patch for the module to add your class. Classes to buttons are added here core/modules/ckeditor/ckeditor.admin.inc (be sure not to edit this core file)

Answer 2

This can be done using a filter plugin. I have written one that does something similar here: https://www.drupal.org/project/wxt/issues/3247278

You can just copy the file that the patch creates and place it in your custom module under /src/Plugin/Filter/WxTAddTableAttributeFilter.php. Then modify the namespace to replace wxt_ext_editor with your module's name. Finally, enable the filter in your text format to take effect.

This filter adds another attribute that you probably don't want, so just remove the code as needed.

This link provides more details on CKEditor filter plugins: https://www.lullabot.com/articles/creating-a-custom-filter-in-drupal-8