Issue while showing saved data on a page with sanitize or html_safe method.

[dil-bparihar]

🐛 Bug Report

After saving the editor's data into a text column when representing the data on a page its not coming in same format.

🔍 Bug Description

A clear and concise description of what the bug is.

📝 Steps to Reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

✅ Expected Behavior

A clear and concise description of what you expected to happen.

❌ Actual Behavior

A clear and concise description of what actually happened.

📸 Screenshots

If applicable, add screenshots to help explain your problem.

📋 Additional Context

• Add any other context about the problem here
• Include relevant logs if available
• List related issues/PRs

[dil-bparihar]

@Mati365 When rendering the data its not the same on the page just like it comes in editor.

[Mati365]

@dil-bparihar What's the input and the output HTML produced by the editor?

[dil-bparihar]

<p><span class=\"text-huge\">Hello how are you ?</span></p><p>Testing font.</p>

Above is the html produced by the editor when using Heading1 @Mati365

[Mati365]

@dil-bparihar Looks like it's CSS issue in your CSS stylesheets. If you pass element with classes to your editor, you have to enable https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html plugin

[dil-bparihar]

<p><span class=\"text-huge\">Hello how are you ?</span></p><p>Testing font.</p>

the above is being provided by the ckeditor to the backend when using heading1 from the toolbar. I have not added it manually. @Mati365

[Mati365]

@dil-bparihar You need to verify Heading plugin configuration. It looks like it might be not enabled nor properly configured, as it should produce h2, etc. heading tags. Check configuration here: https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration, and set configuration that produces h tags instead of additional classes. Otherwise, you need to copy text-huge css class to you main stylesheet.

[dil-bparihar]

I am sorry that was not heading. It was font size. But that i have fixed by adding a wrapper class ck-content. But i am also facing issue with image style.

see the difference. @Mati365

[Mati365]

@dil-bparihar I don't think it's editor issue itself. imho, you should avoid defining your own .ck-content styles, at it'll collide with the editor itself. What's the output of the editor?

[dil-bparihar]

Thanks @Mati365 I had to .ck-content class as a wrapper class for my content. And also i allowed some tags as i am using sanitize method.

[Mati365]

@dil-bparihar Cool!

[dil-bparihar]

One thing i am not able to see table contextual toolbar for table. I have already added both the plugin and toolbar.

@Mati365

[Mati365]

@dil-bparihar Dunno, check if TableToolbar plugin is present in your config. There are more details: https://ckeditor.com/docs/ckeditor5/latest/features/tables/tables.html#toolbars

[dil-bparihar]

Yes its present.

[Mati365]

@dil-bparihar what was the cause?

[dil-bparihar]

@Mati365 Actually when i added this it works:

configure :table, {
      contentToolbar: [
        'tableColumn',
        'tableRow',
        'mergeTableCells',
        'tableProperties',
        'tableCellProperties',
        'toggleTableCaption'
      ]
    }

[dil-bparihar]

@Mati365 Where to add should_group_when_full: false to show all toolbar at once ?

[Mati365]

@dil-bparihar https://github.com/Mati365/ckeditor5-rails/blob/main/lib/ckeditor5/rails/presets/preset_builder.rb#L256-L278 using toolbar helper

[dil-bparihar]

Thanks @Mati365

[dil-bparihar]

@Mati365 our application uses zh-CN language. But when a user is selecting this language the editor is breaking. My concern is event if it did not find cdn for that language it should not break and keep it as en language only.

[Mati365]

@dil-bparihar Implicit fallbacks used to be harder to debug for the user

[dil-bparihar]

So what can we do editor is breaking? @Mati365

[Mati365]

@dil-bparihar I see where the issue is. zh-CN should be lowercased. Consider passing zh-cn

[dil-bparihar]

It would be very hard to change zh-CN at backend side. Is it possible if we can downcase language at gem level ? @Mati365

[Mati365]

yep, I'll release patch later this day

[Mati365]

@dil-bparihar Please upgrade to 1.24.9 and let me know if it works.

[dil-bparihar]

@Mati365 I am trying to use the latest version of ckeditor5 but it throws error in the console. I am using the correct key.

[Mati365]

@dil-bparihar You need to regenerate your license key. There was breaking change in 44.x version of CKEditor itself. Take a look: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-44.html#new-license-key-format

[dil-bparihar]

Thanks @Mati365

[dil-bparihar]

@Mati365 Another issue that i am facing currently when i am selecting background color from color picker using font plugin it is adding wrong color to the text. When second time i am again selecting than it is giving the correct color.

[Mati365]

Looks like it may be related to ckeditor/ckeditor5#17109, unfortunately it's not merged.

[dil-bparihar]

@Mati365 Any other solution to fix it for now ?

[Mati365]

@dil-bparihar For issue with color picker? Dunno, add thumb up emoji to issue specified in PR above.

[dil-bparihar]

And also how can we add a file upload progress for simple_upload_adapter. https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html#upload-progress
@Mati365

[Mati365]

@dil-bparihar It'd be faster to copy & paste content of this plugin: https://github.com/Mati365/ckeditor5-rails/blob/main/lib/ckeditor5/rails/plugins/simple_upload_adapter.rb, and add your custom UI progress

[dil-bparihar]

Can you please elaborate ? @Mati365

[Mati365]

@dil-bparihar https://github.com/Mati365/ckeditor5-rails/blob/main/lib/ckeditor5/rails/plugins/simple_upload_adapter.rb#L37 , xhr object emits progress event that can be used to display your custom progress bar.

If you want to use simple upload adapter from ckeditor, you can attach observer on this plugin: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-upload/src/filerepository.ts#L341, using listenOn handler.

[dil-bparihar]

@Mati365 Getting this error in console and editor is breaking when using simple_upload_adapter.

[Mati365]

It looks like you downgraded version of the Gem.

[dil-bparihar]

using this: gem 'ckeditor5', '~> 1.23.5'

if i will upgrade the gem my custom plugin not working. Using window object. @Mati365

Anyway i have updated my csp rules to make it work.

[Mati365]

if i will upgrade the gem my custom plugin not working. Using window object.

Why? Inline plugins in this gem are just wrapper for this piece of code:

      <<~JS
        window.addEventListener('ckeditor:request-cjs-plugin:#{@plugin.name}', () => {
          window['#{@plugin.name}'] = #{code.html_safe};
        }, { once: true });
      JS

so if you add that listener somewhere in your window, and then use:

plugin :YourPlugin, window_name: :YourWindowName

It has to work, without failing. If you use inline_plugin on the other hand, you need to follow this example: https://github.com/Mati365/ckeditor5-rails?tab=readme-ov-file#custom-plugins-

[dil-bparihar]

can you please elaborate and update the documentation for using the event listner ? @Mati365

[dil-bparihar]

@Mati365 license key is visible in console.

ckeditor5-rails/lib/ckeditor5/rails/assets/webcomponents/components/editor.mjs

Line 322 in 90584a5

console.warn('CKEditor initialized:', {

[Mati365]

@dil-bparihar Yep, it's. The license-key is domain limited so it's useless on other domains than your one.

[dil-bparihar]

can you please elaborate and update the documentation for using the event listner ? @Mati365

what about this @Mati365 ?

[Mati365]

@dil-bparihar I did not have any time to do this.

[dil-bparihar]

@Mati365 Any hint on this error. Getting after gem upgrade to 1.24.9.

[Mati365]

dunno, can you show configuration?

[dil-bparihar]

@Mati365 My plugin js looks like this:

import { Plugin, icons, ButtonView } from 'ckeditor5';
import { ImageInsertUI } from 'ckeditor5';

window.imageUpload = class FileManagerPlugin extends Plugin {
  static get pluginName() {
    return 'FileManagerPlugin';
  }

  init() {
}

[Mati365]

pretty weird, after commenting the 340 line it works fine?

[Mati365]

Confirmed, I'll patch it this day.

[Mati365]

@dil-bparihar Please bump to 1.24.10.

[Mati365]

@dil-bparihar I adjusted docs in plugins https://github.com/Mati365/ckeditor5-rails?tab=readme-ov-file#pluginname-premium-import_name-method. Please report new issues, as this one became too large to follow.

[dil-bparihar]

ckeditor/ckeditor5#17109

PR is approved by someone.

[Mati365]

@dil-bparihar I have no power there. Regardless of approval from the one reviewer, it cannot be merged, as the solution is not perfect and may be problematic for other integrations. I'm thinking about patching it using an external plugin that intercepts the problematic event. Can you open a separate issue in this report to track this issue? I'll take a look if there is potential workaround.

[Mati365]

@dil-bparihar Consider upgrade to 1.26.1. I added patch to integration.