Context Editor

Implementation

This example shows how to use Context Editor which allows multiple editor instances to share the same toolbar. First, wrap your editors with ckeditor5_context helper.

Controller:

def context
  @context_preset = ckeditor5_context_preset do
    inline_plugin :MagicContextPlugin, <<~JS
      const { Plugin } = await import( 'ckeditor5' );

      return class MagicContextPlugin extends Plugin {
        static get pluginName() {
          return 'MagicContextPlugin';
        }

        static get isContextPlugin() {
          return true;
        }

        async init() {
          console.log('MagicContextPlugin was initialized!');
        }
      }
    JS
  end
end

View:

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

<%= ckeditor5_context @context_preset do %>
  <%= ckeditor5_editor initial_data: 'Context Item 1' %>
  <%= ckeditor5_editor initial_data: 'Context Item 2' %>
<% end %>

Additional Resources