Contrib.social

Insert Icon button is disabled in CKEditor 5

Open on Drupal.org →
Created on 28 August 2024, 3 months ago
Updated 19 September 2024, about 2 months ago

Problem/Motivation

I would like to insert icons in ckeditor, but the button insert icon is disabled.

Steps to reproduce

  1. Install module ui_icons
  2. Enable UI Icons, UI Icons Ckeditor5, and some sample UI Icons example modules
  3. Configure a text format (Basic HTML, Full HTML, etc.) to place the button Icon and enable the filter Embed icon
  4. Edit any content item that has a body field, select the appropriate text format
  5. I see the insert icon button in CKEditor toolbar but it is disabled.

Proposed resolution

I skimmed through the ckeditor5 plugin source code and found that in the file 'iconEditing.js', when the schema is registered, it is inherited from imageInline. If I update it to inherit from $inlineObject, then I can insert icon in ckeditor 5.

_defineSchema() {
    const schema = this.editor.model.schema;
    schema.register('drupalIcon', {
      inheritAllFrom: '$inlineObject',
      // inheritAllFrom: 'imageInline',
      allowAttributes: Object.keys(this.attrs),
    });
    // Register `<drupal-icon>` as a block element in the DOM converter. This
    // ensures that the DOM converter knows to handle the `<drupal-icon>` as a
    // block element.
    this.editor.editing.view.domConverter.blockElements.push('drupal-icon');
  }

I don't know if this is something on my end, because I have a couple of customized ckeditor plugins. I'm using Drupal 10.3.1 and Ckeditor 41.3.1
I think I will try to install this module on a vanilla Drupal 11 site to see how it works!

💬 Support request
Status

Fixed

Version

1.0

Component

UI Icons CKEditor

Created by

🇺🇸United States sea2709 Texas

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024