Inline Editor

DemoBasic Example

Click anywhere in this text to start editing. The toolbar will appear above the content.

Implementation

The code below demonstrates how to integrate CKEditor 5 Inline 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: :inline do %>
  Click anywhere in this text to start editing...
<% end %>

Commonly Asked Questions

How to customize the inline toolbar?

Configure it in the initializer:

CKEditor5::Rails.configure do
  toolbar do
    remove :underline  # Remove items
    append :heading    # Add at end
    prepend :undo     # Add at start
  end
end

Can I use inline editor in a form?

Yes! Use the form builder's ckeditor5 helper:

<%= form_with model: @article do |f| %>
  <%= f.ckeditor5 :content, type: :inline %>
<% end %>

How to style the editable area?

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

Additional Resources

View demo source code Gem documentation CKEditor 5 Inline Editor documentation