1

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.

testing table button

2
  • 1
    you could also just target it as .field-body table {}
    – Kevin
    Feb 14, 2019 at 17:23
  • @Kevin we ended up adding it like you suggested and it worked well. Mar 4, 2019 at 18:36

2 Answers 2

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)

4
  • Do you have any suggestions on how to implement this for D8? I am not able to find any custom JS path for the CKEditor profile settings Feb 15, 2019 at 17:16
  • @usernameabc added d8 specific chocies
    – Sam
    Feb 16, 2019 at 1:12
  • option 2 resolved the issue for us and marked the question as such. Mar 4, 2019 at 18:37
  • 1
    Link 3 is missing
    – yunzen
    Mar 26, 2020 at 14:48
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.