First affected CKEditor version

Oct 13, 2025 by miodeya.com 109 views

Introduction

CKEditor 5 is a powerful and feature-rich text editor that provides a wide range of functionalities to its users. However, like any other complex software, it is not immune to bugs and issues. In this article, we will discuss a specific problem that occurs when the editor is configured to allow empty  elements and the user tries to remove formatting from the content using the "Remove Format" button.

The Problem

The issue arises when the editor is configured to allow empty  elements via the htmlSupport configuration. This configuration allows the editor to accept and render HTML elements with specific attributes and classes. However, when the content contains empty spans with class attributes, and the user tries to use the "Remove Format" button from the toolbar, the editor crashes completely.

Reproduction Steps

To reproduce this issue, follow these steps:

Configure the editor to allow empty  elements: Use the following configuration for htmlSupport:

htmlSupport: allowEmpty ["span"], allow: [{ name: "span", classes: true ], },

2. **Create content with empty spans**: Use the following HTML content:
   ```html
<p>
  Hello from CKEditor 5! <span class="test"></span> here test
</p>

Try to remove formatting using the "Remove Format" button: Click on the "Remove Format" button from the toolbar.

Expected Result vs. Actual Result

The expected result is that the empty HTML without any attributes should be removed from the model. However, the actual result is that the editor crashes.

Possible Solution

To fix this issue, either remove any empty HTML elements when they don't have any attributes or handle them gracefully. This can be achieved by modifying the htmlSupport configuration or by implementing a custom solution to handle empty HTML elements.

Other Details

Browser: Any browser can reproduce this issue.
OS: Any operating system can reproduce this issue.
First affected CKEditor version: The latest version of CKEditor 5 (44.3.0) is affected by this issue.
Installed CKEditor plugins: The Essentials, GeneralHtmlSupport, Paragraph, and RemoveFormat plugins are installed.

Conclusion

In conclusion, the issue of removing formatting from empty HTML crashing the editor is a specific problem that occurs when the editor is configured to allow empty  elements and the user tries to remove formatting from the content using the "Remove Format" button. By following the reproduction steps and understanding the expected result vs. actual result, we can identify the possible solution to fix this issue.

Additional Information

Introduction

In our previous article, we discussed a specific problem that occurs when the editor is configured to allow empty  elements and the user tries to remove formatting from the content using the "Remove Format" button. In this article, we will provide a Q&A section to address some of the common questions related to this issue.

Q: What is the cause of this issue?

A: The cause of this issue is the combination of the htmlSupport configuration allowing empty  elements and the user trying to remove formatting from the content using the "Remove Format" button.

Q: What is the expected result when removing formatting from empty HTML elements?

A: The expected result is that the empty HTML without any attributes should be removed from the model.

Q: What is the actual result when removing formatting from empty HTML elements?

A: The actual result is that the editor crashes.

Q: How can I reproduce this issue?

A: To reproduce this issue, follow these steps:

Configure the editor to allow empty  elements using the following configuration for htmlSupport:

htmlSupport: allowEmpty ["span"], allow: [{ name: "span", classes: true ], },

2. Create content with empty spans using the following HTML content:
   ```html
<p>
  Hello from CKEditor 5! <span class="test"></span> here test
</p>

Try to remove formatting using the "Remove Format" button from the toolbar.

Q: What are the possible solutions to fix this issue?

A: There are two possible solutions to fix this issue:

Remove any empty HTML elements when they don't have any attributes.
Handle empty HTML elements gracefully.

Q: How can I modify the `htmlSupport` configuration to fix this issue?

A: To modify the htmlSupport configuration, you can add a custom rule to remove empty HTML elements when they don't have any attributes. For example:

htmlSupport: {
allowEmpty: ["span"],
allow: [{ name: "span", classes: true }],
removeEmpty: true,
},

Q: Can I use a custom solution to handle empty HTML elements?

A: Yes, you can use a custom solution to handle empty HTML elements. For example, you can create a custom plugin that removes empty HTML elements when they don't have any attributes.

Q: What are the benefits of fixing this issue?

A: Fixing this issue will improve the stability and performance of the editor, and will prevent crashes when removing formatting from empty HTML elements.

Q: How can I report this issue?

A: You can report this issue by creating a new ticket on the CKEditor 5 issue tracker. Please provide a detailed description of the issue, including the reproduction steps and any relevant configuration or code.

Conclusion

In conclusion, the issue of removing formatting from empty HTML crashing the editor is a specific problem that occurs when the editor is configured to allow empty  elements and the user tries to remove formatting from the content using the "Remove Format" button. By following the reproduction steps and understanding the possible solutions, we can fix this issue and improve the stability and performance of the editor.