Unverified Commit 09507957 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3222756 by nod_, Wim Leers, bnjmnm, scott_euser, Akhildev.cs, lauriii,... 

Issue #3222756 by nod_, Wim Leers, bnjmnm, scott_euser, Akhildev.cs, lauriii, catch: Allow using images from external source
parent 6e884e31

core/modules/ckeditor5/ckeditor5.ckeditor5.yml

+37 −6
Original line number Diff line number Diff line
@@ -496,18 +496,51 @@ ckeditor5_image: 
      - image.Image

      - image.ImageToolbar

      - drupalImage.DrupalImage

      - drupalImage.DrupalInsertImage

    config:

      image:

        toolbar: [drupalImageAlternativeText]

  drupal:

    label: Image

    class: \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Image

    library: ckeditor5/drupal.ckeditor5.image

    admin_library: ckeditor5/admin.image

    elements:

      - <img>

      - <img src alt data-entity-uuid data-entity-type height width>

      - <img src alt height width>

    toolbar_items:

      drupalInsertImage:

        label: Image

    conditions:

      toolbarItem: drupalInsertImage



ckeditor5_imageUpload:

  ckeditor5:

    plugins:

      - image.ImageUpload

      - drupalImage.DrupalImageUpload

    config:

      image:

        upload:

          types: ["jpeg", "png", "gif"]

  drupal:

    label: Image Upload

    elements:

      - <img data-entity-uuid data-entity-type>

    conditions:

      toolbarItem: uploadImage

      imageUploadStatus: true

      plugins: [ckeditor5_image]



ckeditor5_imageUrl:

  ckeditor5:

    plugins:

      - image.ImageInsertUI

  drupal:

    label: Image URL

    elements: false

    conditions:

      imageUploadStatus: false

      plugins: [ckeditor5_image]



ckeditor5_imageResize:

  ckeditor5:
@@ -542,9 +575,8 @@ ckeditor5_imageCaption: 
    elements:

      - <img data-caption>

    conditions:

      toolbarItem: uploadImage

      imageUploadStatus: true

      filter: filter_caption

      plugins: [ckeditor5_image]



ckeditor5_imageAlign:

  ckeditor5:
@@ -577,9 +609,8 @@ ckeditor5_imageAlign: 
    elements:

      - <img data-align>

    conditions:

      toolbarItem: uploadImage

      imageUploadStatus: true

      filter: filter_align

      plugins: [ckeditor5_image]



ckeditor5_indent:

  ckeditor5:

core/modules/ckeditor5/ckeditor5.libraries.yml

+5 −7
Original line number Diff line number Diff line 
# cspell:ignore imageupload



ckeditor5.language:

  css:

    component:
@@ -181,11 +179,6 @@ admin.alignment: 
    theme:

      css/alignment.admin.css: { }



admin.imageupload:

  css:

    theme:

      css/imageupload.admin.css: { }



admin.indent:

  css:

    theme:
@@ -226,3 +219,8 @@ admin.codeBlock: 
  css:

    theme:

      css/code-block.admin.css: { }



admin.image:

  css:

    theme:

      css/image.admin.css: { }

core/modules/ckeditor5/ckeditor5.post_update.php

+49 −0
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ 
 * Post update functions for CKEditor 5.

 */



use Drupal\ckeditor5\HTMLRestrictions;

use Drupal\Core\Config\Entity\ConfigEntityUpdater;

use Drupal\editor\Entity\Editor;
@@ -51,3 +52,51 @@ function ckeditor5_post_update_alignment_buttons(&$sandbox = []) { 


  $config_entity_updater->update($sandbox, 'editor', $callback);

}



/**

 * The image toolbar item changed from `uploadImage` to `drupalInsertImage`.

 */

function ckeditor5_post_update_image_toolbar_item(&$sandbox = []) {

  $config_entity_updater = \Drupal::classResolver(ConfigEntityUpdater::class);



  $callback = function (Editor $editor) {

    // Only try to update editors using CKEditor 5.

    if ($editor->getEditor() !== 'ckeditor5') {

      return FALSE;

    }



    $needs_update = FALSE;

    // Only update if the editor is using the `uploadImage` toolbar item.

    $settings = $editor->getSettings();

    if (is_array($settings['toolbar']['items']) && in_array('uploadImage', $settings['toolbar']['items'], TRUE)) {

      // Replace `uploadImage` with `drupalInsertImage`.

      $settings['toolbar']['items'] = str_replace('uploadImage', 'drupalInsertImage', $settings['toolbar']['items']);

      // `<img data-entity-uuid data-entity-type>` are implicitly supported when

      // uploads are enabled as the attributes are necessary for upload

      // functionality. If uploads aren't enabled, these attributes must still

      // be supported to ensure existing content that may have them (despite

      // uploads being disabled) remains editable. In this use case, the

      // attributes are added to the `ckeditor5_sourceEditing` allowed tags.

      if (!$editor->getImageUploadSettings()['status']) {

        // Add `sourceEditing` toolbar item if it does not already exist.

        if (!in_array('sourceEditing', $settings['toolbar']['items'], TRUE)) {

          $settings['toolbar']['items'][] = '|';

          $settings['toolbar']['items'][] = 'sourceEditing';

          // @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\SourceEditing::defaultConfiguration()

          $settings['plugins']['ckeditor5_sourceEditing'] = ['allowed_tags' => []];

        }

        // Update configuration.

        $settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'] = HTMLRestrictions::fromString(implode(' ', $settings['plugins']['ckeditor5_sourceEditing']['allowed_tags']))

          ->merge(HTMLRestrictions::fromString('<img data-entity-uuid data-entity-type>'))

          ->toCKEditor5ElementsArray();

      }

      $needs_update = TRUE;

    }

    if ($needs_update) {

      $editor->setSettings($settings);

    }

    return $needs_update;

  };



  $config_entity_updater->update($sandbox, 'editor', $callback);

}

core/modules/ckeditor5/css/image.admin.css

0 → 100644
+3 −0
Original line number Diff line number Diff line 
.ckeditor5-toolbar-button-drupalInsertImage {

  background-image: url(../icons/image.svg);

}

core/modules/ckeditor5/css/imageupload.admin.css

deleted100644 → 0
+0 −4
Original line number Diff line number Diff line 
/* cspell:ignore imageupload */

.ckeditor5-toolbar-button-uploadImage {

  background-image: url(../icons/imageupload.svg);

}