CKEditor 5 Ruby on Rails integration

rubyonrails-talk
1

Hi Rails community!

If you’ve been using ckeditor gen and were looking for a way to integrate CKEditor 5 into your Rails app, I’ve got something for you.

I’ve built ckeditor5, a gem that makes embedding CKEditor 5 in Rails simple and flexible. With this gem, you get:

:white_check_mark: Full support for custom plugins
:white_check_mark: Multiple editor types (e.g., DecoupledEditor)
:white_check_mark: Presets for easy configuration
:white_check_mark: Lazy loading to optimize performance

It’s meant to be a spiritual successor to ckeditor, but modernized for CKEditor 5. If you’re working with rich text in Rails, give it a try and let me know what you think!

:point_right: GitHub Repo

Installation :hammer_and_wrench:

Add this line to your application’s Gemfile:

gem 'ckeditor5'

In your layout:

<!-- app/views/layouts/application.html.erb -->

<!DOCTYPE html>
<html>
  <head>
    <!-- javascript_importmap_tags -->
    <%= yield :head %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

In your view:

<!-- app/views/demos/index.html.erb -->

<% content_for :head do %>
  <!-- 📦 Adds importmap with CKEditor 5 assets. -->
  <!-- 🌍 It'll automatically use your `I18n.locale` language. -->
  <%= ckeditor5_assets %>
<% end %>

<!-- 🖋️ CKEditor 5 might be placed using simple view helper ... -->
<%= ckeditor5_editor %>

<!-- ... or using form input helper -->

<%= form_for @post do |f| %>
  <%= f.ckeditor5 :content, required: true %>
<% end %>

(optional) Customize your config (the default config is defined here):

# 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

  # Optionally, you can specify version of CKEditor 5 to use.
  # If it's not specified the default version specified in the gem will be used.
  version '44.1.0'

  # Upload images to the server using the simple upload adapter, instead of Base64 encoding.
  # simple_upload_adapter

  # Specify global language for the editor.
  # It can be done here, in controller or in the view.
  # By default the `I18n.locale` is used.
  # language :pl
end

Voilà! You have CKEditor 5 integrated with your Rails application. :tada:

Looking forward to your feedback! :rocket:

2 Likes