Balloon 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 default preset. Then we create an editor instance using ckeditor5_editor helper with some initial content.

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

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

Commonly Asked Questions

CKEditor5::Rails.configure do
  presets.override :balloon do
    balloon_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