Special Characters

Implementation

This example demonstrates how to configure special characters in CKEditor 5. The configuration allows you to define custom groups of special characters with labels and specific ordering.

@preset = ckeditor5_preset do
  version '43.3.0'

  toolbar :sourceEditing, :|, :bold, :italic, :underline,
          :strikethrough, :|, :specialCharacters, :|,
          :bulletedList, :numberedList, :|,
          :fontFamily, :fontSize, :|,
          :fontColor, :fontBackgroundColor

  plugins :Essentials, :Paragraph, :Bold, :Italic, :Underline,
          :Strikethrough, :List, :Font, :FontFamily, :FontSize,
          :FontColor, :FontBackgroundColor, :SourceEditing

  special_characters do
    # Enable built-in packs using symbols
    packs :Text, :Essentials, :Currency, :Mathematical, :Latin

    # Custom groups
    group 'Emoji', label: 'Emoticons' do
      item 'smiley', '😊'
      item 'heart', '❤️'
    end

    group 'Arrows',
          items: [
            { title: 'right arrow', character: '→' },
            { title: 'left arrow', character: '←' }
          ]

    group 'Mixed',
          items: [{ title: 'star', character: '⭐' }],
          label: 'Mixed Characters' do
      item 'heart', '❤️'
    end

    order :Text, :Currency, :Mathematical, :Latin, :Emoji, :Arrows, :Mixed
  end
end

<% content_for :head do %>
  <%= ckeditor5_assets preset: @preset %>
<% end %>
<%= ckeditor5_editor editable_height: 300 %>

Additional Resources