CKEditor 5 support

I used this module to block paste images as base64 (because they saved to database)

I upgraded one site to CKEditor 5 and now images uploaded to files directory when pasted. If you use this module as me, you don't need this module anymore

Can anybody else confirm that this module is not needed anymore in ckeditor 5?

@askibinski I tested this with CKEditor 5 and the comment from #3 is not true.

If you use the Media button in CKEditor 5 you use the Drupal file system to store the images. But if you use the normal Image button, the images are still external like before and will get stored to the database.

I tested creating an Image from the image https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg and also pasting the following base64 test image https://codepen.io/jamiekane/pen/YayWOa.

Both are saved to the editor and displayed in source like this:

<p><img src=https://archive.mpi.nl/mpi/islandora/object/lat%3A1839_3127d465_db4e_4667_ad6c_279ab65c21eb/datastream/MEDIUM_SIZE/views"></p><p><img src="image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFa ooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="></p>

These do not get converted to Drupal files at least in my testing.

All this said, I also tested this module but ended up using CKEditor 5 Paste Filter → to filter out pasted content. I feel like we could also deprecate this module and point users to that filter module. It seems much more robust and can also filter out pasted content to solve the issue I and @ivnish had with base64 images being pasted to the editor.

I tested only the most popular scenarios in my site - drag'n'drop image from local PC files to CKEditor and copy/paste from browser to CKEditor. In both cases I don't get base64 and files were uploaded to site files.

I don't tested any media entities cases with CKEditor

@ivnish

I used the exact same process with the Image button and I still get <img> tags with the external image. I wonder if there is CKEditor 5 setting that is different in our setups?

There are at least two settings in CKEditor 5 that could affect the end result:

1. Enable image uploads
2. Restrict images to this site

I tested that if I enable those settings I cannot anymore paste an image URL to the Image tool but I need to select the image from my computer. This does create the images as inline images in the file system. But even in this case I can also insert an external if I copy the image first in browser and then paste it.

This results in the following:

<p><img src="/system/files/inline-images/375211485_296700789628963_4084129377570425898_n.jpg" data-entity-uuid="4f6e464f-35ab-4007-a7f8-a43e90aa494d" data-entity-type="file"></p><p><img src="https://archive.mpi.nl/mpi/islandora/object/lat%3A1839_3127d465_db4e_4667_ad6c_279ab65c21eb/datastream/MEDIUM_SIZE/views" alt="https://archive.mpi.nl/mpi/islandora/object/lat%3A1839_3127d465_db4e_4667_ad6c_279ab65c21eb/datastream/MEDIUM_SIZE/views"></p>
</div>

In any case it still seems that with certain CKEditor 5 configuration you are able to insert base64 images like before so the actual problem still exists that this module was originally solving.

I tested this on CKEditor 5 in two ways:

Please note that the tag needs to be allowed otherwise blocking isn't necesseary anyway (like the project page of this module states).

1: Copy an image (not the address) from any webbrowser and paste it into ckeditor 5.

This would create an but with the src being the http:// address of the image.
This is hotlinking an image, but not something this module is addressing.

2: Drag and drop an image from your local system into ckeditor 5.
This would create the base64 encoded image in ckeditor 4, but it seems to be blocked by default in ckeditor 5.

I think the default ckeditor build without additional plugins doesn't allow this out of the box.
There is a demo at https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/... which does provide this functionality but it is differently configured.

So, it seems that in a standard configuration as described, this module is not necessary anymore. I'm not sure how to reproduce the steps above which state otherwise.

On Ckeditor 5 when you are trying to paste image from Microsoft Office Word (Windows), it returns base64 object. It uploads image just when you are adding image element and enable "upload image". But what to do when you don't want image element to be uploaded to your files folder.
For sure this module logic is necessary on CKeditor!