# CKEditor 5 Rails Integration โจ [![License: GPL v2](https://img.shields.io/badge/License-GPL_v2-blue.svg?style=flat-square)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html) ![Gem Version](https://img.shields.io/gem/v/ckeditor5?style=flat-square) ![Gem Total Downloads](https://img.shields.io/gem/dt/ckeditor5?style=flat-square&color=orange) [![Coverage](https://img.shields.io/codecov/c/github/mati365/ckeditor5-rails?style=flat-square)](https://codecov.io/gh/mati365/ckeditor5-rails) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg?style=flat-square)](http://makeapullrequest.com) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/mati365/ckeditor5-rails?style=flat-square) [![GitHub issues](https://img.shields.io/github/issues/mati365/ckeditor5-rails?style=flat-square)](https://github.com/Mati365/ckeditor5-rails/issues) Unofficial CKEditor 5 Ruby on Rails integration gem. Provides seamless integration of CKEditor 5 with Rails applications through web components and helper methods.
## Installation ๐ ๏ธ Add this line to your application's Gemfile: ```ruby gem 'ckeditor5' ``` In your config (the default config is defined [here](https://github.com/Mati365/ckeditor5-rails/blob/main/lib/ckeditor5/rails/presets/manager.rb)): ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ๐ Specify the version of editor you want. # โ๏ธ Default configuration includes: # ๐ Classic editor build # ๐งฉ Essential plugins (paragraphs, basic styles) # ๐๏ธ Default toolbar layout # ๐ GPL license version '43.3.0' end ``` In your layout: ```erb <%= yield :head %> <%= yield %> ``` In your view: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor %> <%= form_for @post do |f| %> <%= f.ckeditor5 :content, required: true %> <% end %> ``` Voilร ! You have CKEditor 5 integrated with your Rails application. ๐ ## Try Our Demos! ๐ฎ โจ Want to see some cool examples? We've got you covered! Check out our interactive [demo application](https://github.com/Mati365/ckeditor5-rails/tree/main/sandbox/app/views/demos) packed with various editor configurations. You can also explore official CKEditor 5 [examples](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html) for more inspiration! ๐ก Ready to play with the demos locally? It's super easy! Just follow these steps: ๐ ```bash bundle install # Install all the goodies ๐ฆ bundle exec guard -g rails # Fire up the server ๐ฅ ``` Now the fun part - open [http://localhost:3000/](http://localhost:3000/) in your browser and start experimenting! ๐ฏ Feel free to tweak the code and make it your own! ๐จ Want to extend CKEditor's functionality? Check out our [plugins directory](https://github.com/Mati365/ckeditor5-rails/tree/main/lib/ckeditor5/rails/plugins) and create your own awesome plugins! ๐ We love community contributions - your plugin could be the next great addition to our ecosystem! โญ ## Table of Contents ๐ - [CKEditor 5 Rails Integration โจ](#ckeditor-5-rails-integration-) - [Installation ๐ ๏ธ](#installation-๏ธ) - [Try Our Demos! ๐ฎ โจ](#try-our-demos--) - [Table of Contents ๐](#table-of-contents-) - [Presets ๐จ](#presets-) - [Automatic upgrades ๐](#automatic-upgrades-) - [Available Configuration Methods โ๏ธ](#available-configuration-methods-๏ธ) - [`cdn(cdn = nil, &block)` method](#cdncdn--nil-block-method) - [`version(version)` method](#versionversion-method) - [`automatic_upgrades(enabled: true)` method](#automatic_upgradesenabled-true-method) - [`gpl` method](#gpl-method) - [`license_key(key)` method](#license_keykey-method) - [`premium` method](#premium-method) - [`editable_height(height)` method](#editable_heightheight-method) - [`translations(*languages)` method](#translationslanguages-method) - [`ckbox` method](#ckbox-method) - [`type(type)` method](#typetype-method) - [`toolbar(*items, should_group_when_full: true, &block)` method](#toolbaritems-should_group_when_full-true-block-method) - [`menubar(visible: true)` method](#menubarvisible-true-method) - [`language(ui, content:)` method](#languageui-content-method) - [`configure(name, value)` method](#configurename-value-method) - [`plugin(name, premium:, import_name:)` method](#pluginname-premium-import_name-method) - [`plugins(*names, **kwargs)` method](#pluginsnames-kwargs-method) - [`inline_plugin(name, code)` method](#inline_pluginname-code-method) - [`simple_upload_adapter(url)` method](#simple_upload_adapterurl-method) - [Controller / View helpers ๐ฆ](#controller--view-helpers-) - [`ckeditor5_element_ref(selector)` method](#ckeditor5_element_refselector-method) - [`ckeditor5_preset(&block)` method](#ckeditor5_presetblock-method) - [Including CKEditor 5 assets ๐ฆ](#including-ckeditor-5-assets-) - [Format ๐](#format-) - [Using default preset](#using-default-preset) - [Custom preset](#custom-preset) - [Inline preset definition](#inline-preset-definition) - [Lazy loading ๐](#lazy-loading-) - [GPL usage ๐](#gpl-usage-) - [Commercial usage ๐ฐ](#commercial-usage-) - [Editor placement ๐๏ธ](#editor-placement-๏ธ) - [Setting Initial Content ๐](#setting-initial-content-) - [Watchdog ๐](#watchdog-) - [Classic editor ๐](#classic-editor-) - [Multiroot editor ๐ณ](#multiroot-editor-) - [Inline editor ๐](#inline-editor-) - [Balloon editor ๐](#balloon-editor-) - [Decoupled editor ๐](#decoupled-editor-) - [Using Context ๐ฆ](#using-context-) - [Using Context in CKEditor 5 ๐](#using-context-in-ckeditor-5-) - [Example usage of `ckeditor5_context` helper ๐](#example-usage-of-ckeditor5_context-helper-) - [How to access editor instance? ๐ค](#how-to-access-editor-instance-) - [Common Tasks and Solutions ๐ก](#common-tasks-and-solutions-) - [Setting Editor Language ๐](#setting-editor-language-) - [Integrating with Forms ๐](#integrating-with-forms-) - [Rails form builder integration](#rails-form-builder-integration) - [Simple form integration](#simple-form-integration) - [Custom Styling ๐จ](#custom-styling-) - [Custom plugins ๐งฉ](#custom-plugins-) - [Events fired by the editor ๐](#events-fired-by-the-editor-) - [`editor-ready` event](#editor-ready-event) - [`editor-error` event](#editor-error-event) - [`editor-change` event](#editor-change-event) - [Inline event handling](#inline-event-handling) - [Gem Development ๐ ](#gem-development-) - [Running tests ๐งช](#running-tests-) - [Trademarks ๐](#trademarks-) - [License ๐](#license-) ## Presets ๐จ Presets are predefined configurations of CKEditor 5, allowing quick setup with specific features. The gem includes a `:default` preset with common features like bold, italic, underline, and link for the classic editor. You can create your own by defining it in the `config/initializers/ckeditor5.rb` file using the `config.presets.define` method. The example below illustrates the setup of a custom preset with a classic editor and a custom toolbar: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # It's possible to override the default preset right in the initializer. version '43.3.0' # New presets inherit properties from the default preset defined in the initializer. # In this example, the custom preset inherits everything from default but disables the menubar: presets.define :inherited_custom menubar visible: false end # In order to define preset from scratch, you can use the `inherit: false` option. presets.define :blank_preset, inherit: false do version '44.0.0' # It tells the integration to fetch the newest security patches and bug fixes. # It may be disabled, but it's highly recommended to keep it enabled to avoid # potential security issues. automatic_upgrades gpl type :classic menubar toolbar :undo, :redo, :|, :heading, :|, :bold, :italic, :underline, :|, :link, :insertImage, :mediaEmbed, :insertTable, :blockQuote, :|, :bulletedList, :numberedList, :todoList, :outdent, :indent plugins :AccessibilityHelp, :Autoformat, :AutoImage, :Autosave, :BlockQuote, :Bold, :CloudServices, :Essentials, :Heading, :ImageBlock, :ImageCaption, :ImageInline, :ImageInsert, :ImageInsertViaUrl, :ImageResize, :ImageStyle, :ImageTextAlternative, :ImageToolbar, :ImageUpload, :Indent, :IndentBlock, :Italic, :Link, :LinkImage, :List, :ListProperties, :MediaEmbed, :Paragraph, :PasteFromOffice, :PictureEditing, :SelectAll, :Table, :TableCaption, :TableCellProperties, :TableColumnResize, :TableProperties, :TableToolbar, :TextTransformation, :TodoList, :Underline, :Undo, :Base64UploadAdapter configure :image, { toolbar: ['imageTextAlternative', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'] } end end ``` In order to override existing presets, you can use the `presets.override` method. The method takes the name of the preset you want to override and a block with the old configuration. The example below shows how to hide the menubar in the default preset: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do presets.override :custom do menubar visible: false toolbar do remove :underline, :heading end end end ``` Configuration of the editor can be complex, and it's recommended to use the [CKEditor 5 online builder](https://ckeditor.com/ckeditor-5/online-builder/) to generate the configuration. It allows you to select the features you want to include and generate the configuration code in JavaScript format. Keep in mind that you need to convert the JavaScript configuration to Ruby format before using it in this gem. ### Automatic upgrades ๐ The gem includes a feature that automatically upgrades the CKEditor 5 version when it's released. It's enabled by default for the `:default` preset. It means that the editor will automatically check the version of the editor during the initialization and upgrade it to the latest version if the new patch or minor version is released. If you want to disable automatic upgrades, you can pass the `enabled: false` keyword argument to the `automatic_upgrades` method. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration automatic_upgrades enabled: false end ``` ### Available Configuration Methods โ๏ธ #### `cdn(cdn = nil, &block)` method Defines the CDN to be used for CKEditor 5 assets. The example below shows how to set the CDN to `:jsdelivr`: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration cdn :jsdelivr end ``` It also allows you to define a custom CDN by passing a block with the bundle, version, and path arguments. The example below shows how to define it for the `jsdelivr` CDN: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration cdn do |bundle, version, path| base_url = "https://cdn.jsdelivr.net/npm/#{bundle}@#{version}/dist" "#{base_url}/#{path.start_with?('translations/') ? '' : 'browser/'}#{path}" end end ``` #### `version(version)` method Defines the version of CKEditor 5 to be used. The example below shows how to set the version to `43.2.0`: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration version '43.2.0' end ``` #### `automatic_upgrades(enabled: true)` method Defines if automatic upgrades should be enabled. It's enabled for the `:default` preset by default. The example below shows how to disable automatic upgrades: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration automatic_upgrades enabled: false end ``` It means that the editor will automatically upgrade to the latest version when the gem is updated. It'll upgrade the editor only if the new patch or minor version is released. If you want to disable automatic upgrades, you can pass the `enabled: false` keyword argument to the `automatic_upgrades` method. Version is checked every nth day, where n is the number of days since the last check. Currently it's 4 days. #### `gpl` method Defines the license of CKEditor 5. The example below shows how to set the license to GPL: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration gpl end ``` #### `license_key(key)` method Defines the license key of CKEditor 5. It calls `premium` method internally. The example below shows how to set the license key: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration license_key 'your-license-key' end ``` #### `premium` method Defines if premium package should be included in JS assets. The example below shows how to add `ckeditor5-premium-features` to import maps: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration premium end ``` #### `editable_height(height)` method Defines the height of the editor. The example below shows how to set the height to `300px`: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration editable_height 300 end ``` #### `translations(*languages)` method Defines the translations of CKEditor 5. You can pass the language codes as arguments. The example below shows how tell integration to fetch Polish and Spanish translations: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration translations :pl, :es end ``` โ ๏ธ You need to use `language` method to set the default language of the editor, as the `translations` only fetch the translations files and makes them available to later use. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration translations :pl language :pl end ``` #### `ckbox` method Defines the CKBox plugin to be included in the editor. The example below shows how to include the CKBox plugin: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration ckbox '2.6.0', theme: :lark end ``` #### `type(type)` method Defines the type of editor. Available options: - `:classic` - classic edytor - `:inline` - inline editor - `:decoupled` - decoupled editor - `:balloon` - balloon editor - `:multiroot` - editor with multiple editing areas The example below sets the editor type to `multiroot` in the custom preset: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration type :multiroot end ``` #### `toolbar(*items, should_group_when_full: true, &block)` method Defines the toolbar items. You can use predefined items like `:undo`, `:redo`, `:|` or specify custom items. There are a few special items: - `:_` - breakpoint - `:|` - separator The `should_group_when_full` keyword argument determines whether the toolbar should group items when there is not enough space. It's set to `true` by default. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration toolbar :undo, :redo, :|, :heading, :|, :bold, :italic, :underline, :|, :link, :insertImage, :ckbox, :mediaEmbed, :insertTable, :blockQuote, :|, :bulletedList, :numberedList, :todoList, :outdent, :indent end ``` Keep in mind that the order of items is important, and you should install the corresponding plugins. You can find the list of available plugins in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/plugins.html). If you want to add or prepend items to the existing toolbar, you can use the block syntax: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration toolbar do append :selectAll, :|, :selectAll, :selectAll # Or prepend: prepend :selectAll, :|, :selectAll, :selectAll end end ``` If you want to remove items from the toolbar, you can use the `remove` method: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration toolbar do remove :selectAll, :heading #, ... end end ``` #### `menubar(visible: true)` method Defines the visibility of the menubar. By default, it's set to `true`. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration toolbar :undo, :redo, :|, :heading, :|, :bold, :italic, :underline, :|, :link, :insertImage, :ckbox, :mediaEmbed, :insertTable, :blockQuote, :|, :bulletedList, :numberedList, :todoList, :outdent, :indent end ``` #### `language(ui, content:)` method Defines the language of the editor. You can pass the language code as an argument. Keep in mind that the UI and content language can be different. The example below shows how to set the Polish language for the UI and content: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration language :pl end ``` In order to set the language for the content, you can pass the `content` keyword argument: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration language :en, content: :pl end ``` #### `configure(name, value)` method Allows you to set custom configuration options. You can pass the name of the option and its value as arguments. The [`ckeditor5_element_ref(selector)` helper](#ckeditor5_element_refselector-method) allows you to reference DOM elements that will be used by the editor's features. It's particularly useful for features that need to check element presence or operate on specific DOM elements. For example, you can use it to configure font family dropdown to show only fonts available in specific elements: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration configure :fontFamily, { supportAllValues: true, options: [ 'default', 'Arial, Helvetica, sans-serif', 'Courier New, Courier, monospace', 'Georgia, serif', 'Lucida Sans Unicode, Lucida Grande, sans-serif', 'Tahoma, Geneva, sans-serif', 'Times New Roman, Times, serif', 'Trebuchet MS, Helvetica, sans-serif', 'Verdana, Geneva, sans-serif' ] } end ``` #### `plugin(name, premium:, import_name:)` method Defines a plugin to be included in the editor. You can pass the name of the plugin as an argument. The `premium` keyword argument determines whether the plugin is premium. The `import_name` keyword argument specifies the name of the package to import the plugin from. The example below show how to import Bold plugin from the `ckeditor5` npm package: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration plugin :Bold end ``` In order to import a plugin from a custom ESM package, you can pass the `import_name` keyword argument: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration plugin :YourPlugin, import_name: 'your-package' end ``` In order to import a plugin from a custom Window entry, you can pass the `window_name` keyword argument: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration plugin :YourPlugin, window_name: 'YourPlugin' end ``` #### `plugins(*names, **kwargs)` method Defines the plugins to be included in the editor. You can specify multiple plugins by passing their names as arguments. The keyword arguments are identical to the configuration of the `plugin` method defined below. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration plugins :Bold, :Italic, :Underline, :Link end ``` Methods such as `remove`, `append`, and `prepend` can be used to modify the plugins configuration. To remove a plugin, you can use the `remove` method with the plugin name as an argument: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration plugins do remove :Heading end end ``` #### `inline_plugin(name, code)` method Use with caution as this is an inline definition of the plugin code, and you can define a custom class or function for the plugin here. The example below shows how to define a custom plugin that highlights the text: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration inline_plugin :MyCustomPlugin, <<~JS import { Plugin } from 'ckeditor5'; export default class MyCustomPlugin extends Plugin { static get pluginName() { return 'MyCustomPlugin'; } init() { // ... Your plugin code } } JS end ``` #### `simple_upload_adapter(url)` method Defines the URL for the simple upload adapter. The default endpoint is `/uploads` and the method is `POST`. The example below shows how to set the URL to `/uploads`: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration simple_upload_adapter # or: simple_upload_adapter '/uploads' end ``` ### Controller / View helpers ๐ฆ #### `ckeditor5_element_ref(selector)` method Defines a reference to a CKEditor 5 element. In other words, it allows you to reference DOM elements that will be used by the editor's features. It's particularly useful for features that need to check element presence or operate on specific DOM elements. The primary example is the `presence list` feature that requires a reference to the element that will be used to display the list. ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... other configuration configure :yourPlugin, { element: ckeditor5_element_ref("body") } end ``` #### `ckeditor5_preset(&block)` method The `ckeditor5_preset` method allows you to define a custom preset in your application controller. It may be useful when you want to define a preset based on the current user or request. ```rb # app/controllers/application_controller.rb class ApplicationController < ActionController::Base def show @preset = ckeditor5_preset do version '43.3.0' toolbar :sourceEditing, :|, :bold, :italic, :underline, :strikethrough, :subscript, :superscript, :removeFormat, :|, :bulletedList, :numberedList, :fontFamily, :fontSize, :|, :link, :anchor, :|, :fontColor, :fontBackgroundColor plugins :Essentials, :Paragraph, :Bold, :Italic, :Underline, :Strikethrough, :Subscript, :Superscript, :RemoveFormat, :List, :Link, :Font, :FontFamily, :FontSize, :FontColor, :FontBackgroundColor, :SourceEditing, :Essentials, :Paragraph end end end ``` In order to use the preset in the view, you can pass it to the `ckeditor5_assets` helper method: ```erb <% content_for :head do %> <%= ckeditor5_assets preset: @preset %> <% end %> <%= ckeditor5_editor %> ``` ## Including CKEditor 5 assets ๐ฆ To include CKEditor 5 assets in your application, you can use the `ckeditor5_assets` helper method. This method takes the version of CKEditor 5 as an argument and includes the necessary resources of the editor. Depending on the specified configuration, it includes the JS and CSS assets from the official CKEditor 5 CDN or one of the popular CDNs. Keep in mind that you need to include the helper result in the `head` section of your layout. In examples below, we use `content_for` helper to include the assets in the `head` section of the view. ### Format ๐ #### Using default preset The example below users the default preset defined [here](https://github.com/Mati365/ckeditor5-rails/blob/main/lib/ckeditor5/rails/presets/manager.rb). ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> ``` If you want to fetch some additional translations, you can extend your initializer with the following configuration: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... rest of the configuration translations :pl, :es end ``` #### Custom preset To specify a custom preset, you need to pass the `preset` keyword argument with the name of the preset. The example below shows how to include the assets for the custom preset: ```erb <% content_for :head do %> <%= ckeditor5_assets preset: :custom %> <% end %> <%-# This editor will use `custom` preset defined in `ckeditor5_assets` above %> <%= ckeditor5_editor %> ``` In order to define such preset, you can use the following configuration: ```rb # config/initializers/ckeditor5.rb CKEditor5::Rails.configure do # ... rest of the configuration presets.define :custom do # ... your preset configuration translations :pl, :es end end ``` :warning: Keep in mind that all `ckeditor5_editor` helpers will use the configuration from the preset defined in the `ckeditor5_assets`. If you want to use a different preset for a specific editor, you can pass the `preset` keyword argument to the `ckeditor5_editor` helper. ```erb <% content_for :head do %> <%= ckeditor5_assets preset: :custom %> <% end %> <%= ckeditor5_editor preset: :default %> ``` #### Inline preset definition It's possible to define the preset directly in the `ckeditor5_assets` helper method. It allows you to dynamically specify version, cdn provider or even translations in the view. The example below inherits the default preset and adds Polish translations and other options: ```erb <% content_for :head do %> <%= ckeditor5_assets version: '43.3.0', cdn: :jsdelivr, translations: [:pl], license_key: '
Initial content
" %> ``` The example below shows how to set the initial content of the editor using the `ckeditor5_editor` helper block. ```erb <%= ckeditor5_editor do %>Initial content
<% end %> ``` ### Watchdog ๐ CKEditor 5 uses a watchdog utility to protect you from data loss in case the editor crashes. It saves your content just before the crash and creates a new instance of the editor with your content intact. It's enabled by default in the gem. If you want to disable the watchdog, you can pass the `watchdog` keyword argument with the value `false`: ```erb <%= ckeditor5_editor watchdog: false %> ``` ### Classic editor ๐ The classic editor is the most common type of editor. It provides a toolbar with various formatting options like bold, italic, underline, and link. It looks like this: ![CKEditor 5 Classic Editor in Ruby on Rails application with Menubar](docs/classic-editor-with-toolbar.png) The example below shows how to include the classic editor in your view: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor style: 'width: 600px' %> ``` You can pass the `style` keyword argument to the `ckeditor5_editor` helper to define the editor's style. The example above shows how to set the width of the editor to `600px`. However you can pass any HTML attribute you want, such as `class`, `id`, `data-*`, etc. While example above uses predefined `:default` preset, you can use your custom presets by passing the `preset` keyword argument: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor preset: :custom, style: 'width: 600px' %> ``` If your configuration is even more complex, you can pass the `config` and `type` arguments with the configuration hash: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor type: :classic, config: { plugins: [:Bold, :Italic], toolbar: [:Bold, :Italic] }, style: 'width: 600px' %> ``` If you want to override the configuration of the editor specified in default or custom preset, you can pass the `extra_config` keyword argument with the configuration hash: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor extra_config: { toolbar: [:Bold, :Italic] }, style: 'width: 600px' %> ``` It's possible to define the height of the editor by passing the `editable_height` keyword argument with the value in pixels: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor editable_height: 300 %> ``` ### Multiroot editor ๐ณ The multiroot editor allows you to create an editor with multiple editable areas. It's useful when you want to create a CMS with multiple editable areas on a single page. - `ckeditor5_editor`: Defines the editor instance. - `ckeditor5_editable`: Defines the editable areas within the editor. - `ckeditor5_toolbar`: Defines the toolbar for the editor. ![CKEditor 5 Multiroot Editor in Ruby on Rails application](docs/multiroot-editor.png) If you want to use a multiroot editor, you can pass the `type` keyword argument with the value `:multiroot`: ```erb <% content_for :head do %> <%= ckeditor5_assets %> <% end %> <%= ckeditor5_editor type: :multiroot, style: 'width: 600px' do %> <%= ckeditor5_toolbar %>