CKEditor special characters: build a small, clearly named symbol palette

For a workshop instruction, an author needs to write “Leave a 5 mm ± 1 mm clearance.” A plus sign and a hyphen on separate keystrokes are not the plus-minus character. A small palette with descriptive names makes the intended character easier to choose, while the written sentence still explains what the symbol means.

Add the feature to the existing editor

In an existing compatible CKEditor 5 installation, import the core palette and its prepared character categories:

import {
  SpecialCharacters,
  SpecialCharactersEssentials
} from 'ckeditor5';

const symbolPlugins = [
  SpecialCharacters,
  SpecialCharactersEssentials
];

Include these plugins in the application's existing editor configuration and add specialCharacters to its toolbar. Keep the application's other document plugins, stylesheet, editor creation code, and required license configuration. This fragment supplies the palette pieces; it does not mount an editor by itself.

The core plugin manages categories and entries. Essentials supplies the prepared categories. If authors only need a few categories, load the corresponding individual category plugins instead of Essentials. Do not include a category indirectly through Essentials and then assume removing an unrelated toolbar item removes its symbols.

Name the custom entry for the task

The palette can also expose a deliberately small category. This application plugin adds the clearance symbol with a distinctive title:

function WorkshopSymbols(editor) {
  editor.plugins.get('SpecialCharacters').addItems(
    'Workshop',
    [
      {
        title: 'workshop clearance plus-minus',
        character: '\u00B1'
      }
    ],
    { label: 'Workshop notation' }
  );
}

Include WorkshopSymbols after the Special Characters dependency in the configured plugin list. The title must be unique across the complete character set, including other loaded categories. A custom category may offer a character already present elsewhere; its purpose here is to make a specific authoring vocabulary easy to locate, not to introduce a new Unicode character.

The optional third argument sets the displayed group label. Keep the internal group name and user-facing label deliberate if the application supports multiple interface languages. Do not use an unlabeled collection of similar glyphs as the only selection aid.

Verify the character in saved text

In the development editor, type Leave a 5 mm , select the plus-minus entry, and finish with 1 mm clearance. Save and reopen the instruction. Copy the symbol from the reader view into a plain-text inspection field. For this example, the expected character is U+00B1:

const clearanceSymbol = '\u00B1';
const codePoints = Array.from(clearanceSymbol, character =>
  character.codePointAt(0).toString(16).toUpperCase()
);
// Expected: ['B1']

This small JavaScript check identifies the fixture character. Copying the value from the saved reader view also checks the delivery path. The document owner supplies the actual clearance and units.

Font appearance can vary between the editing surface and the reader page. Inspect the saved text as well as the visible glyph. A literal Unicode character and an HTML numeric reference can serialize differently while representing the same text after parsing.

Keep insertion separate from automatic rewriting

A palette inserts an explicitly chosen character. An input-rule extension can replace characters while an author types. The typography configuration guide covers that different behavior and the need to preserve literal technical strings.

Before releasing the workshop instruction, have its owner read the entire clearance sentence and confirm the notation, value, and units together. A correctly inserted ± establishes the character choice; it does not establish that the instruction gives a safe or correct tolerance.