Balloon Block Editor

Implementation

The code below demonstrates how to integrate CKEditor 5 Balloon editor in Rails. First, we load required assets using ckeditor5_assets helper with balloon_block preset. Then we create an editor instance using ckeditor5_editor helper with some initial content.

<% content_for :head do %>
  <%= ckeditor5_assets preset: :balloon_block %>
<% end %>

<%= ckeditor5_editor do %>
  Click anywhere in this text to start editing...
<% end %>

The preset configuration in the initializer (make sure to include theBlockToolbar plugin):

CKEditor5::Rails.configure do
  presets.define :balloon_block, inherit: false do
    version '43.3.0'
    editable_height 100

    plugins :Essentials, :Paragraph, :Bold, :Italic, :Underline,
            :Strikethrough, :Subscript, :Superscript, :RemoveFormat,
            :List, :Link, :Font, :FontFamily, :FontSize, :FontColor,
            :FontBackgroundColor, :SourceEditing, :BlockToolbar # BlockToolbar is required!

    block_toolbar :sourceEditing, :|, :bold, :italic, :underline,
                :strikethrough, :subscript, :superscript, :removeFormat,
                :|, :bulletedList, :numberedList, :fontFamily,
                :fontSize, :|, :link, :anchor, :|,
                :fontColor, :fontBackgroundColor
  end
end

Commonly Asked Questions

CKEditor5::Rails.configure do
  presets.override :balloon do
    block_toolbar do
      remove :underline  # Remove items
      append :heading    # Add at end
      prepend :undo     # Add at start
    end
  end
end

<%= ckeditor5_editor type: :balloon,
    class: 'bg-light p-3 rounded',
    editable_height: 300 %>

Additional Resources