回上一頁

Rails+ckeditor應用

rails 5~6也適用

Ckeditor是幾乎文字相關專案都會運用到的編輯器,

此篇將新版本Rails 7.0來撰寫一下文章,有需要的歡迎看。

 

以下是需安裝的Gemfile

gem 'carrierwave'

gem 'ckeditor'

gem "mini_magick"

gem 'rmagick'

 

Mac & Server:

# server install 
sudo apt-get install imagemagick --fix-missing

# mac local
brew install imagemagick

以下是分別設定檔案。

ActiveRecord + carrierwave


rails g ckeditor:install --orm=active_record --backend=carrierwave
rails db:migrate

 

config/applicaton.rb

config.autoload_paths += %w(#{config.root}/app/models/ckeditor)

 

config/routes.rb

mount Ckeditor::Engine => '/ckeditor'

 

config/initializers/ckeditor.rb

Ckeditor.setup do |config|
  # //cdn.ckeditor.com/<version.number>/<distribution>/ckeditor.js
  config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"
end

 

CDN ckeditor js:

# in view layout
<%= javascript_include_tag Ckeditor.cdn_url %>

 

config/initializers/assets.rb

# in config/initializers/assets.rb
Rails.application.config.assets.precompile += %w[ckeditor/config.js]

以上,可以開始使用編輯器了。

延伸應用:以上基礎建設,後續可以搭配延伸設計,例如AJAX處理。