如何在 Rails 6 中集成 CKEditor？答案

【问题标题】：How to integrate CKEditor in rails 6?如何在 Rails 6 中集成 CKEditor？
【发布时间】：2021-03-30 04:06:21
【问题描述】：

我正在开发一个 Rails 6 应用程序，我想在其中集成 CKEditor。我已经按照 Github README 和我对 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 )

跑rails generate ckeditor:install --orm=active_record --backend=active_storage
在你的路由 (config/routes.rb) 中安装 Ckeditor::Engine: as mount 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}", 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 %>

【问题讨论】：

您能否编辑问题以包含您添加到应用程序中的相关代码。很可能在您添加它的任何视图中添加了 init 方法，也许只是解释了您如何将 JS 添加到应用程序中。一个快速的问题。如果查看页面源码，有没有看到CKEditor相关的JS或CSS？
是的，我可以在源代码中看到 CKEditor JS，但在 CSS 中看不到。
您能否将相关代码添加到您的问题中。没有它，我认为没有任何方法可以提供帮助。谢谢！
添加了相关代码。请看一看。

标签： ruby-on-rails ckeditor ruby-on-rails-6

【解决方案1】：

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

【讨论】：