如何在Rails 6中集成CKEditor？

如何解决如何在Rails 6中集成CKEditor？

我正在开发要集成CKEditor的Rails 6应用程序。我已经按照Github自述文件和我对Rails 6的了解完成了安装。

浏览器控制台中的待办事项列表也没有错误，但是，我只得到了可以拉伸但没有工具栏的框。

编辑-请找到与CKEditor相关的代码。

• 在Gemfile中添加了 gem'ckeditor'，'〜> 5.1'。

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 导轨生成ckeditor：install --orm = active_record --backend = active_storage

• 将Ckeditor :: Engine安装在您的路由中（config / routes.rb）：安装Ckeditor :: Engine =>'/ ckeditor'

• 要在 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

• 以表单查看

<%= 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}",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 %>

解决方法

您正在使用 CKEDITOR 5 的 CDN 网址，但 gem ckeditor 说它仅支持 ckeditor 4