ckeditor用法(富文本编辑)

在gemfile中添加

#富文本编辑
gem 'ckeditor'
#图片处理
gem 'mini_magick'  
#上传
gem 'carrierwave', '~> 1.0'

这里carrierwave上传 也可以搭配其他的gem使用。

在config/initializers/assets.rb中添加

Rails.application.config.assets.precompile += %w( ckeditor/*)

在终端里执行

rails generate ckeditor:install --orm=active_record --backend=carrierwave

在application.rb中添加

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

在config/routes.rb添加(一般都会自动添加,如果没有手动加上)

mount Ckeditor::Engine => '/ckeditor'

在app/assets/javascripts/application.js中加入

//= require ckeditor/init
这里要注意:1、添加到//= require_tree .的前面
2、//= require jquery_ujs的后面
然后执行 rake db:migrate

页面上的用法

<%= form.cktext_area :content,ckeditor: { uiColor: 'A4D3FF', toolbar: 'mini' } %>
这里注意:toolbar: 'mini' 表示迷你版的功能
toolbar: 'full' 表示全部功能
uiColor 表示编辑框的颜色
更多编辑功能
更多编辑功能

注意事项:

如果在app/assets/javascripts/application.js中加入
//= require ckeditor/init
application.js的名称发生改变,或者不能正常使用
请在页面的顶部添加
<%= javascript_include_tag 'ckeditor.js' %>

你可能感兴趣的:(ckeditor用法(富文本编辑))