Classic Editor

DemoBasic Example

Hello World

Implementation

The code below demonstrates how to integrate CKEditor 5 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 do %>
  Hello World
<% end %>

Commonly Asked Questions

How do I change the editor's height?

<%= ckeditor5_editor editable_height: 300 %>

How can I customize the toolbar?

Create or modify initializer file config/initializers/ckeditor5.rb:

CKEditor5::Rails.configure do
  version '44.0.0'
  gpl
  type :classic

  toolbar :undo, :redo, :|,      # Add separator using :|
          :heading, :_, :bold,   # Add line break using :_
          :italic, :underline

  plugins :Essentials, :Heading,
          :Bold, :Italic, :Underline
end

Can I change the editor's language?

Yes! By default, the editor uses your application's I18n.locale. However, you have several options to override it:

1. In initializer (recommended):

# config/initializers/ckeditor5.rb
CKEditor5::Rails.configure do
  translations :pl, :es, :de
  language :pl
end

2. In the assets helper:

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

3. On the editor level:

<%= ckeditor5_editor language: :pl %>

4. Different languages for UI and content:

CKEditor5::Rails.configure do
  language :pl, content: :en
end

Note: Remember to preload translations if you plan to switch languages dynamically:

CKEditor5::Rails.configure do
  translations :pl, :es, :de, :fr
end

How do I access the editor instance?

The safest way is to use the runAfterEditorReady helper:

document
  .getElementById('editor')
  .runAfterEditorReady(editor => {
    console.log('Editor is ready:', editor);

    // Get/set content
    const data = editor.getData();
    editor.setData('New content');
  });

Additional Resources

View demo source code Gem documentation CKEditor 5 Classic Editor documentation