WYSIWYG:What You See Is What You Get

安装和基本使用

#gemfile
gem 'ckeditor'  #使用这个插件安装ckeditor
gem 'carrierwave' #使用这个插件上传图片
gem 'carrierwave-upyun' #使用这个插件上传到upyun
gem 'mini_magick' #需要安装imagemagick

#指定active_record&carrierwave
rails generate ckeditor:install --orm=active_record --backend=carrierwave  #会报错，但是可以忽略

#application.js中添加如下代码
//= require ckeditor/init

#执行migrate,安装ckeditor_assets表
rails db:migrate #会报错，需要修改migrate中文件，修改为继承最新的ActiveRecord::Migration[5.1]

#在view文件中进行使用
<%= form_for ... do |f| %>
  <%= f.cktext_area :introduction %>
<% end %>

#创建app/assets/javascripts/ckeditor/config.js进行ckeditor的定制
CKEDITOR.editorConfig = function( config ) {
  config.language = 'zh-CN'; #务必指定它的语言，并且编译 assets, 否则每次需要加载几十个文件，ckeditor的语言包特别大
  config.height='600px'；
  config.allowedContent = true #避免只能输入inline style
};

#改变存储位置使之上传到upyun中
#ckeditor_demo/app/uploaders/ckeditor_attachment_file_uploader.rb
#ckeditor_demo/app/uploaders/ckeditor_picture_uploader.rb
class CkeditorAttachmentFileUploader < CarrierWave::Uploader::Base
  storage :upyun
end