How to integrate CKEditor with Rails 6 app?
Piyush-Chaudhary opened this issue · 2 comments
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 %>
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.
I have the same issue on Rails 5