CKEditor 4中为<thead>应用类属性失败的技术求助

Hey Sam, I’ve run into similar CKEditor styling quirks with tables in Drupal 7 before—let’s break down how to get that Gray head class properly applied to your <thead> element.

Why Your Current Setup Isn’t Working #

When you right-click a table header cell and apply the style, CKEditor is targeting the selected <th> element, not its parent <thead>. Since your style is configured to modify <thead>, the editor gets confused and ends up creating those empty elements instead of applying the class to the correct parent.

Solution 1: Adjust CKEditor Styles Configuration & Select the Right Element #

First, update your ckeditor.styles.js to add a context rule, which helps CKEditor recognize where the style should be applied:

{ name : 'Gray head', element : 'thead', attributes : { 'class' : 'foo' }, context : 'table' },

Then, to apply the style correctly:

• Insert your compact table and set the first row as the header.
• Look at the element path at the bottom of the CKEditor window (it looks like body > table > thead > tr > th). Click on thead in this path to select the entire header section.
• Open the styles dropdown and choose "Gray head"—the foo class should now be applied directly to the <thead> element.

Solution 2: A More User-Friendly Workaround (Table-Level Class) #

If getting users to select <thead> via the element path feels too clunky, try applying a class to the entire table instead, then target the <thead> in your CSS. This is often more intuitive for content editors:

1. Update ckeditor.styles.js:

{ name : 'Gray Head Table', element : 'table', attributes : { 'class' : 'table-gray-head' } },

2. Adjust your CSS to target the table’s <thead>:

div.responsive-table table.table-gray-head thead {
  text-align: center;
  border: 1pt solid #000; /* Note: Your original border property was incomplete—add a style and color */
  background: rgba(168,157,157,1.00);
}

3. Now, users can simply select the entire table, apply the "Gray Head Table" style, and the header will inherit the correct styling automatically.

Quick Checks to Ensure Success #

• Enable Required Plugins: In your Drupal text format configuration (admin/config/content/formats), make sure the Table and Table Tools plugins are enabled for your CKEditor profile.
• Clear Caches: After modifying ckeditor.styles.js, clear Drupal’s site cache (admin/config/development/performance) and your browser cache to load the new styles.

内容的提问来源于stack exchange，提问作者sam452