01/24/2025

CKEditor 5: Base64 encoded embedded images loose src

I have a project, where the customer sometimes pastes images directly into the editor, which then get saved as base64 encoded data url in the `src` attribute. However, I the customer recently stated, that the images disappear after saving, when the editor shows again.

It seems, that the `DataFilter` plugin, which is included in the `GeneralHtmlSupport` plugin, strips the `data:image/…` from the `src` attribute. To solve this, you can configure the HTML support like describe in the CKEditor 5 General HTML Support documentation.

When using a JavaScript configuration, that would look like this:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        htmlSupport: {
            allow: [
                {
                    name: 'img',
                    attributes: {
                        src: true // `true` allows any value
                    }
                }
            ]
        }
    })

When using TYPO3 CMS, the editor is configured with YAML. The configuration would look like this:

editor:
   config:
      htmlSupport:
         allow:
            - name: img
              attributes:
                 src: true

I hope, this save someone, some time.