1

The CKEditor 5 documentation shows the easy way how to add special characters to CKEditor 5 (https://ckeditor.com/docs/ckeditor5/latest/features/special-characters.html):

import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';

function SpecialCharactersEmoji( editor ) {
    editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
        { title: 'smiley face', character: '' },
        { title: 'rocket', character: '' },
        { title: 'wind blowing face', character: '️' },
        { title: 'floppy disk', character: '' },
        { title: 'heart', character: '❤️' }
    ] );
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            SpecialCharacters, SpecialCharactersEssentials, SpecialCharactersEmoji,

            // Other plugins...
        ],
        toolbar: [ 'specialCharacters', ... ],
    } )
    .then( ... )
    .catch( ... );

But I have not found how to change it in Drupal 9. Does any special hook exist for it?

I have tried to create a new module based on starter template (https://git.drupalcode.org/project/ckeditor5_dev/-/tree/1.0.x/ckeditor5_plugin_starter_template):

chars.info.yml

name: Characters
type: module
description: "Provides CKEditor plugin."
package: CKEditor 5
core_version_requirement: ^9.2 | ^10.0
dependencies:
  - drupal:ckeditor5

chars.ckeditor5.yml

chars_chars:
  ckeditor5:
    plugins:
      - chars.Chars
  drupal:
    label: Characters
    library: chars/chars
    elements: false

chars.libraries.yml

chars:
  js:
    js/build/chars.js: { preprocess: false, minified: true }
  dependencies:
    - core/ckeditor5

ckeditor5_plugins/chars/src/chars.js

import { Plugin } from 'ckeditor5/src/core';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';

export default class Chars extends Plugin {
  init() {
    const editor = this.editor;
    editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
      { title: 'smiley face', character: '' },
      { title: 'rocket', character: '' },
      { title: 'wind blowing face', character: '️' },
      { title: 'floppy disk', character: '' },
      { title: 'heart', character: '❤️' }
    ] );
  }

  static get pluginName() {
    return 'Chars';
  }

  static get requires() {
    return [SpecialCharacters];
  }
}

This code was built by yarn run build and insert to js/build/folder. When CKEditor is loaded the console throws: CKEditorError: plugincollection-plugin-not-found {"plugin":null}

0 Answers0