Tables, Images, and Figures

[KirkMunroSagent]

📝 Ask a question

I'm having a problem with tables in CKEditor (latest version: 43.1.0).

In my environment, I'm working with a lot of pre-existing HTML, loading that into CKEditor as needed to allow users to modify that content.

Some of that content includes tables that were never intended to be figures.

For example, using a simple table to list a bunch of related values in a nicely formatted manner.

CKEditor5 takes those tables, and wraps them in figures. I've looked through the docs and the GitHub repo and found a lot of discussion from the past about how the team interpreted the HTML5 standard as indicating that tables should always be represented as figures, even if they do not have an associated caption. I disagree completely with this approach. Figures can contain tables, but tables are not implicitly figures. Not in HTML, and not in formal documentation either.

At any rate, my challenge is figuring out how to undo this, because figures are centered by default, but tables outside of figures are not, so this auto-wrapping of the tables in figures changes the rendering of the content, and since much of the content passed into the editor is controlled/managed by customers, the rendered view of the content that is being passed into the editor must not change just because the editor team interpreted the HTML5 standard as requiring tables to be in figures (the customer owns the content, not the editor).

Images seem to function in a similar manner in CKEditor, but with much more flexibility. I can have an img tag in a document, and it renders properly. If I use CKEditor add a caption to the image, then the image is wrapped in a figure. If I remove the caption, it is unwrapped and becomes a plain image again. This is what I want to happen with tables, allowing vanilla tables to render using default table formatting/rendering, but if I add a caption, then and only then wrap them inside of a figure to group the table and the caption together, at which point figure formatting/rendering is used.

Does anyone have any idea how to make this happen? Does this require duplicating the CKEditor5-table plugin and modifying it to undo the hard/forced wrapping in figures that plugin seems to apply with no option to have it do otherwise? Or are there some simple settings that can be applied to change this behavior to preserve/respect what the user is doing, keeping tables as tables with an option to promote them to figures when necessary (such as when you add a caption)?

[Witoso]

Hi, thanks for the detail explanation of the problem. CKEditor 5 took the opinionated approach, and while it's troublesome for some use cases, it helped us a lot during the development of more complex features. I'm sure @Reinmar or @scofalik can share more details here.

The HTML for us is "just" a rendering format. The editor operates on a custom data layer, so output is always standardized. But the conversion mechanism can be adjusted, and you can decide how certain elements will be downcasted to HTML.

Usually, it's easy, but with more complex structures, like tables, it may require more work. We have an example plugin for table that you can use, that may be helpful: PlainTableOutput. It strips the figure and uses just table.

[KirkMunroSagent]

We have an example plugin for table that you can use, that may be helpful: PlainTableOutput. It strips the figure and uses just table.

Thank you very much for this. I will look into this very soon to see if I can make it work.

As a suggestion, you may want to reference that plugin in your Table documentation so that it is more well known/discoverable. Despite my many search attempts for solutions, including reviewing the docs, source code, and searching in these discussions I never came across this plugin.

[KirkMunroSagent]

@Witoso: I just gave this a try (meaning I simply added the PlainTableOutput plugin to my CKEditor). The result has me confused. If I view the HTML source in CKEditor, I see the table preserved as a table. But in the rendered view in the editor, the table is still showing wrapped in a figure, which I can also confirm via the Inspector. I suppose that's why it's called PlainTableOutput instead of simply PlainTable.

What else can be done to take this further such that tables don't render as figures by default? Or is the thinking that by using the PlainTableOutput, we can preserve the HTML that gets saved, even if when rendered in CKEditor it is rendered using figures. That doesn't work well though, because the rendered format is still off. If I create a new table with PlainTableOutput loaded, the table gets created taking up 100% of the view, which isn't what I want. Then I resized it, and it showed that it's still centered as the size was shrunk down. The resizing is awkward as well, because it uses percentages instead of pixels. That might be the right approach for HTML rendered in a browser as part of a web page, but it isn't the right approach for HTML email message content. If I open an email message full screen, and that content contains a table to show me structured information, it is more than likely that I don't want the size of that table to scale up with the size of my screen...that would just look awkward. So now I'm wondering how to make tables in CKEditor use absolute (px) instead of relative (%) sizing when tables or columns or rows are resized.

I'm still trying to figure out how to make this work (it's quickly become quite a lot of time put into this), but it's still a problem.

[KirkMunroSagent]

@Witoso: Any update on this?

Also, I just noticed that the bold B toolbar button wraps selected text in a <strong> element instead of a <b> element. It seems this was configurable in CKEditor 4, but it's not configurable in CKEditor 5?

Related: Jahia/richtext-ckeditor5#24

I want bold to simply wrap text in <b>, and I most certainly want existing formatting where <b> is already in use to be preserved.

CKEditor 5 took the opinionated approach, and while it's troublesome for some use cases, it helped us a lot during the development of more complex features.

My opinionated view here is that what "some use cases" means in that sentence was underestimated, and the time savings and code simplicity your team may have gained internally comes at a high cost for your customers. Changing all existing HTML in a document while doing so in a completely hidden fashion from the consumer simply because you opened an that document in CK Editor and added or modified something in that document can easily lead to unexpected/undesirable surprises, which nobody likes.

[Witoso]

Sorry, I lost my draft, as it was just sitting here. Anyway.

It looks like you're migrating from CKEditor 4. I understand this can be a challenging process. CKEditor 5 is significantly different from version 4, and migrating data between these versions requires careful adaptation. Due to the fundamental differences, CKEditor 5 does not work the same way as CKEditor 4, and many of the changes reflect intentional design decisions made nearly a decade ago.

CKEditor 5 is designed around modern needs, particularly real-time collaboration, which meant taking a very different approach to how data is handled. Unlike CKEditor 4, CKEditor 5 doesn't directly operate on HTML but uses a model that undergoes normalization, which can be customized through configuration (e.g., overwriting b to strong in downcasting). This means it won't always accept arbitrary HTML content, and it may not fit every use case out-of-the-box.

These changes were not just for internal simplicity, but to ensure the long-term scalability of both the product and the company. I'm sorry if CKEditor 5's behavior doesn't fit ideally your specific needs at the moment :(.

You mentioned emails as part of your workflow. We're currently researching HTML normalization specifically for email content, as we know our current approach isn't always ideal in that context. If you're interested, we will share findings and updates in #1627.

[KirkMunroSagent]

Thanks @Witoso. I'm actually not migrating from CKEditor 4. I recently switched from another editor. Same result though, a challenging process because the other editor left the HTML the way it was, leaving ownership of that HTML to the author, while CKEditor does not.

The existing HTML coming into the editor is very basic. Bold/italic styling, paragraphs, line breaks, images, hyperlinks, and possibly some tables. That's about it. I'm just trying to preserve it as-is vs. making adjustments/corrections. I've succeeded for the most part, and can now make it work for b tags due to the link you shared (thank you).

The only piece I have left outstanding that I know of then is tables being wrapped in figures. I want to prevent that from happening. Your earlier link gave me a plugin that keeps tables unwrapped in the HTML code view in the editor, but in the rendered view it still wraps them with figures. Is there a plugin to prevent the rendered view from wrapping tables in figures by default? Or a way to tweak the plugin you shared so that it does the same?