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

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

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)

  • 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 '19 at 17:16
  • @usernameabc added d8 specific chocies
    – Sam
    Feb 16 '19 at 1:12
  • option 2 resolved the issue for us and marked the question as such. Mar 4 '19 at 18:37
  • Link 3 is missing
    – yunzen
    Mar 26 '20 at 14:48

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.