ck5 caveats documentation: The insertTable plugin should be disabled in your text format unless you're fine with strict tables and do not use th elements in your tbody

Created on 2 April 2025, 2 months ago

Problem/Motivation

We switched from CK4 to CK5 as part of our Drupal 10 to Drupal 11 upgrade and we hit a nasty surprise on one of our more complex sites that has elements in a <tbody> such as <tr><th>

🐛 [upstream] [Table] CKEditor 5 editing table with rowspans removes header property Postponed: needs info
🐛 [upstream] [Table] CKEditor 5 changes and keeps only a single , which impedes screen reader accessibility of HTML tables Postponed

Upstream issues:

https://github.com/ckeditor/ckeditor5/issues/14911
https://github.com/ckeditor/ckeditor5/issues/17962
https://github.com/ckeditor/ckeditor5/pull/17870 Didn't prevent the markup mangling situation we found relating to table th elements being moved
https://github.com/ckeditor/ckeditor5/issues/10916 Ideally we would have this option available but for some reason the ck5 folks won't provide the ability to disable their filtering!

Steps to reproduce

Switch from ck4 to ck5

use this test html for example, see the before and after:

<table>
<thead>
<tr>
<td class="text-right"><b>Yearly product launches</b></td>
<td><b>6</b></td>
<td><b>8</b></td>
<td><b>20</b></td>
<td><b>14</b></td>
</tr>
</thead>
<tbody>
<tr><th colspan="6" id="tcl325">Top five brands</th></tr>
<tr>
<td class="text-left">UMMEAT</td>
<td>20</td><td>30</td><td>32</td><td>8</td>
</tr>
<tr>
<td class="text-left">Mamp;5 Food Plant Kitchen</td>
<td>20</td><td>30</td><td>32</td><td>8</td>
</tr>
<tr>
<td class="text-left">Alpro Barista</td>
<td>20</td><td>30</td><td>32</td><td>8</td>
</tr>
<tr>
<td class="text-left">Alpro</td>
<td>20</td><td>30</td><td>32</td><td>8</td>
</tr>
<tr>
<td class="text-left">Califia Farms</td>
<td>20</td><td>30</td><td>32</td><td>8</td>
</tr>

<tr><th colspan="6" id="tcl376">Top five companies</th></tr>
<!-- Continue with similar rows as needed -->
</tbody>
</table>

Proposed resolution

Workaround: Disable the insertTable widget (looks like a square with many squares inside.

Remaining tasks

Create some sort of ck5 caveats documentation.

User interface changes

Preserve sane behavior with tables.

API changes

Driven by upstream ck5 widget/plugin called insertTable

Data model changes

Ruined markup.

📌 Task

Status

Active

Version

6.1

Component

Documentation

Created by

🇨🇦Canada joseph.olstad

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @joseph.olstad
Comment 2 months ago →
🇨🇦Canada joseph.olstad
Comment 2 months ago →
🇨🇦Canada joseph.olstad
Comment 24 days ago →
🇨🇦Canada smulvih2 Canada 🍁
Created a module to fix issues with tables from CKEditor4 (or any semantically correct table pasted in) - https://www.drupal.org/project/ckeditor5_table_fix →

If anyone is experiencing issues with properly formatted tables in CKEditor5, disable the table plugin and add the faux-plugin from this module to resolve. It redefines the table elements in CKEditor5 with as much flexibility as possible. Can also add support for additional table elements if required.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024