A far as I understood things, as from Drupal 10.3 onwards, we are should be able to upload SVG images in the CKEditor 5 as long as we implement the following hook...

/**
 * Drupal 10.3+: Enable upload of SVGs and WebP images in the CKEditor.
 */

function MY_MODULE_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
  $image_upload_plugin_definition = $plugin_definitions['ckeditor5_imageUpload']->toArray();
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'webp';
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg';
  $plugin_definitions['ckeditor5_imageUpload'] = new CKEditor5PluginDefinition($image_upload_plugin_definition);
}

However, when I implement it exactly as above, it does indeed add .webp files to the available types but does not add .svg filetype.

Is there another step I need to do?

Thanks all.

Comments

SirClickalot created an issue. See original summary.

juagarc4’s picture

juagarc4 commented

Hi SirClickalot

I had the same problem and found a solution in the file "ckeditor5_test_module_allowed_image.module".
The type should be an IANA image media type Name, like it's explained in the mentioned file.

// Add a custom file type to the image upload plugin. Note that 'svg+xml'
// below should be an IANA image media type Name, with the "image/" prefix
// omitted. In other words: a subtype of type image.

So, you should replace your line:

$image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg';

by

$image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg+xml';

It should fix your problem.

Regards

cilefen’s picture

cilefen commented
Component: extension system » ckeditor5.module
sirclickalot’s picture

sirclickalot
Primary language English
Location Somerset
commented

@juagarc4 brilliant, just what I needed, thank you!

juagarc4’s picture

juagarc4 commented

Hi SirClickalot,

I close this ticket since the problem has been solved :-)

Regards

juagarc4’s picture

juagarc4 commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

lissy’s picture

lissy commented

i am using Ckeditor 5 with Drupal 10.4.1 and would like to use svg-images with the image plugin from ckeditor.
I tried the function above in my Sub-theme from claro but it is not possible to upload svg.
Where is to place the hook? Or did i need aditional configuration?

juagarc4’s picture

juagarc4 commented

Hi lissy,

the function with the necessary change applied:

function MY_MODULE_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
  $image_upload_plugin_definition = $plugin_definitions['ckeditor5_imageUpload']->toArray();
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'webp';
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg+xml'; 
  $plugin_definitions['ckeditor5_imageUpload'] = new CKEditor5PluginDefinition($image_upload_plugin_definition);
}

should be placed into the file with extension ".module" of a custom module replacing the prefix "MY_MODULE" by the name of the module. Then you should enable the module and clear cache. No other configuration is needed.

This hook should be placed in a module since placing it in a theme won't work for Backend.

Regards