How to integrate CKEditor with Rails 6 app?

[Piyush-Chaudhary]

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.

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 %>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dawidof]

I have the same issue on Rails 5