CKEditor 5: Custom style causing unexpected span tags when pasting from Google Docs

Other Questions Google docs
1

I’m having trouble with CKEditor 5 after adding a custom style. I made a ‘Blue dropcap’ style that uses a span with a ‘dropcap’ class. Now, when I paste text from Google Docs, it adds extra span tags without any classes or attributes.

Here’s what happens:

Without the custom style, pasting from Google Docs gives me clean HTML:

<p>Some text</p>

But with the custom style, I get unwanted spans:

<p><span>Some text</span></p>

I tried using htmlSupport to fix this, but it either doesn’t work or disables my custom style completely.

Does anyone know how to keep my custom style while preventing these extra spans when pasting from Google Docs? I’m stuck and could really use some help. Thanks!

2

I’ve dealt with this exact problem in a project recently. What worked for me was implementing a custom paste transformation that intercepts and cleans up the content before it’s inserted into the editor. Instead of relying on the default behavior, I created a custom plugin that listens for paste events. In the plugin, I use DOM manipulation or regular expressions to remove unwanted span tags while preserving my custom ‘dropcap’ spans. It took some trial and error, but this approach maintained my style without interfering with other editor functionalities.

3

I encountered a similar issue when implementing custom styles in CKEditor 5. One approach that worked for me was to create a custom paste handler. This allows you to intercept the pasted content before it’s inserted into the editor.

In your CKEditor configuration, you can add a ‘paste’ event listener. Within this handler, you can use regular expressions to strip out unwanted span tags that don’t have any attributes. This method preserves your custom styles while cleaning up the pasted content.

Remember to test thoroughly, as this solution might need fine-tuning depending on your specific use case. If you’re still struggling, consider reaching out to the CKEditor community forums for more specialized assistance.

4

hey harry, i’ve run into similar issues before. have u tried tweaking the paste from office plugin settings? sometimes adjusting the filtering options can help with those pesky spans. also, double-check ur config for any conflicting paste rules. if that doesn’t work, u might need to dig into the paste pipeline. good luck!