How to integrate CKEditor in rails 6?

Question

I am developing a rails 6 app in which I want to integrate CKEditor. I have done installing as per the Github README and my knowledge to Rails 6.

There is no error in backlogs as well in the browser console but still, I am getting only the box which can be stretch but with no toolbar.

Edit - Please find the associated code with the CKEditor.

Added gem 'ckeditor', '~> 5.1' in Gemfile.

confif/initializers/assets.rb

# Be sure to restart your server when you modify this file.

Rails.application.config do |assets|
  # Version of your assets, change this if you want to expire all your assets.
  assets.version = '1.0'

  # Add additional assets to the asset load path.
  # Rails.application.config.assets.paths << Emoji.images_path
  # Add Yarn node_modules folder to the asset load path.
  assets.paths << Rails.root.join('node_modules')

  # For ckeditor
  assets.precompile += %w[ckeditor/*]
end

# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Ran rails generate ckeditor:install --orm=active_record --backend=active_storage
Mount the Ckeditor::Engine in your routes (config/routes.rb): as mount Ckeditor::Engine => '/ckeditor'
Setup editor version to load in config/initializers/ckeditor.rb

Ckeditor.setup do |config|
  require 'ckeditor/orm/active_record'
  config.cdn_url = 'https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js'
end

View in form

<%= simple_form_for @product, url: products_path,
  wrapper: :horizontal_form,
  wrapper_mappings: {
    boolean:       :horizontal_boolean,
    check_boxes:   :horizontal_collection,
    date:          :horizontal_multi_select,
    datetime:      :horizontal_multi_select,
    file:          :horizontal_file,
    radio_buttons: :horizontal_collection,
    range:         :horizontal_range,
    time:          :horizontal_multi_select
  } do |f| %>

  <%= f.error_notification %>

  <%= f.input :name %>

  <%= f.input :description, as: :ckeditor, input_html: { ckeditor: { toolbar: 'Full' } } %>

  <%= f.input :category_id, collection: Category.all.map{|c| ["#{c.name}", c.id]}, prompt: :translate %>

  <%= f.input :sub_category_id, collection: SubCategory.all.map{|c| ["#{c.name}", c.id]}, prompt: :translate %>

  <%= f.input :size, :include_blank => "Select the size of the Product", collection: product_size_list %>

  <%= f.input :material, :include_blank => "Select the material of the Product", collection: product_size_list %>

  <%= f.input :surface, :include_blank => "Select the surface of the Product", collection: product_size_list %>

  <%= f.input :images, as: :file, input_html: { multiple: true } %>

  <%= f.input :price %>

  <div class="form-group row mb-0">
    <div class="col-sm-9 offset-sm-3">
      <%= f.button :submit, class: "btn-primary" %>
      <%= f.button :button, "Clear", type: "reset", class: "btn-outline-secondary" %>
      <%= link_to 'Back', products_path %>
    </div>
  </div>
<% end %>

Can you edit the question to include the relevant code you added to your app. Likely the init method added in whatever view you added it to and perhaps just explain how you added the JS to the app. One quick question. If you view the page source, do you see any JS or CSS related to CKEditor? — Rockwell Rice
Yes, I can see the CKEditor JS in the source but not the CSS. — Piyush Chaudhary
Can you please add the relevant code to your question. Without that, I do not think there will be any way to help. Thanks! — Rockwell Rice

Gaeguri Gaeguri · Accepted Answer · 2021-03-29T20:06:21

You are using a CDN url for CKEDITOR 5 but the gem ckeditor say it support only ckeditor 4

How to integrate CKEditor in rails 6?

1 Answers