[Ruby] 网页添加文本编辑器 Kindeditor for Ruby on Rails

Kindeditor for Ruby on Rails 中文文档

Kindeditor是国产的所见即所得javascript富文本编辑器, 访问 http://www.kindsoft.net 获取更多信息. rails_kindeditor可以帮助你的rails程序集成kindeditor,包括了图片和附件上传功能，文件按照类型、日期进行存储。

安装及使用

将下面代码加入Gemfile：

gem 'rails_kindeditor'

运行"bundle"命令：

bundle

安装Kindeditor，运行下面的代码：

rails generate rails_kindeditor:install

注意： 在你的工程中需要有application.js文件。

Rails4
in production mode

从Rails 4.0开始, precompiling assets不再自动从vendor/assets和lib/assets拷贝非JS/CSS文件. 参见https://github.com/rails/rails/pull/7968 如果要使用Rails
4.0的生产模式，请运行'rake kindeditor:assets', 此方法可将kindeditor自动拷贝到你的public/assets目录.

rake kindeditor:assets

使用方法:

1. <%= kindeditor_tag :content, 'default content value' %>
# or <%= kindeditor_tag :content, 'default content value', :width => 800, :height => 300 %>
# or <%= kindeditor_tag :content, 'default content value', :allowFileManager => false %>

2. <%= form_for @article do |f| -%>
...
<%= f.kindeditor :content %>
# or <%= f.kindeditor :content, :width => 800, :height => 300 %>
# or <%= f.kindeditor :content, :allowFileManager => false %>
...
<% end -%>

你可以像往常那样使用kindeditor自身的初始化参数，请访问 http://www.kindsoft.net/docs/option.html 查看更多参数。

另外，rails_kindeditor还额外提供一个"simple_mode"参数，以便快捷使用简单模式的kindeditor。

kindeditor_tag :content, 'default content value', :simple_mode => true
f.kindeditor :content, :simple_mode => true
f.input :content, :as => :kindeditor, :input_html => { :simple_mode => true } # simple_form & formtastic

完毕！

如何在turbolinks下使用

rails_kindeditor在turbolinks下不会正常加载，只有当页面刷新时才正常。turbolinks的机制就是这样的，页面根本没刷新，这和pjax是一样的，所以kindeditor没加载很正常。

有两个办法可以解决：

1.在需要加载kindeditor的链接加入 'data-no-turbolink' => true ，此时相当在这个页面于关闭turbolinks。

<%= link_to 'Edit', edit_article_path(article), 'data-no-turbolink' => true %>

2.在turbolinks载入完毕后手动加载kindeditor，不过所有参数都要设置，而且需要知道并设定textarea的id。

# coffeescript code
$(document).on 'page:load', ->
if $('#article_content').length > 0
KindEditor.create '#article_content', "width":"100%", "height":300, "allowFileManager":true, "uploadJson":"/kindeditor/upload", "fileManagerJson":"/kindeditor/filemanager"

simple模式也需要手动设定

# coffeescript code
$(document).on 'page:load', ->
if $('#article_content').length > 0
KindEditor.create '#article_content',
"width":"100%",
"height":300,
"allowFileManager":true,
"uploadJson":"/kindeditor/upload",
"fileManagerJson":"/kindeditor/filemanager",
"items":["fontname","fontsize","|","forecolor","hilitecolor","bold","italic","underline","removeformat","|","justifyleft","justifycenter","justifyright","insertorderedlist","insertunorderedlist","|","emoticons","image","link"]

需要指定owner_id的方法：

f.kindeditor :content, owner: @article

# coffeescript code
$(document).on 'page:load', ->
if $('#article_content').length > 0
KindEditor.create '#article_content',
"width" : "100%",
"height" : 300,
"allowFileManager" : true,
"uploadJson" : $('#article_content').data('upload'),
"fileManagerJson" : $('#article_content').data('filemanager')

把javascript放在模板最下方，不放在head里面，如何正确加载kindeditor？

有时候，为了加快页面载入速度，也许你会把javascript引用放在template的底部，rails_kindeditor提供了一个参数可以确保正常加载：

<%= f.kindeditor :content, :window_onload => true %>

警告：Kindeditor会在页面所有的内容加载完毕后才进行加载，所以需谨慎使用

SimpleForm与Formtastic集成：

simple_form:

<%= form.input :content, :as => :kindeditor, :label => false, :input_html => { :width => 800, :height => 300 } %>

formtastic:

<%= form.input :content, :as => :kindeditor %>
<%= form.input :content, :as => :kindeditor, :input_html => { :height => 300 } %>

如何获取kindeditor的内容

<%= form_for @article do |f| %>
<%= f.kindeditor :content, :editor_id => 'my_editor' %>
<% end %>

可通过下面的Javascript代码获取内容:

// Javascript code
my_editor.html();

上传图片及文件配置

当你运行"rails generate rails_kindeditor:install"的时候，安装器会将配置文件拷贝到config/initializers文件夹。 你可以配置以下上传选项：

# 指定上传目录，目录可以指定多级，都存储在public目录下.
# You can customize it , eg: config.upload_dir = 'this/is/my/folder'
config.upload_dir = 'uploads'

# 指定允许上传的文件类型.
config.upload_image_ext = %w[gif jpg jpeg png bmp]
config.upload_flash_ext = %w[swf flv]
config.upload_media_ext = %w[swf flv mp3 wav wma wmv mid avi mpg asf rm rmvb]
config.upload_file_ext = %w[doc docx xls xlsx ppt htm html txt zip rar gz bz2]

# 处理上传文件，需要mini_magick
#     处理以前      => 处理以后
# eg: 1600x1600 => 800x800
#     1600x800  => 800x400
#     400x400   => 400x400 # 图片小于该限制尺寸则不作处理
# config.image_resize_to_limit = [800, 800]

静态资源地址配置

# if you have config in your rails application like this:
# /config/enviroments/production.rb
#   # config.action_controller.asset_host = "http://asset.example.com"
#   # config.assets.prefix = "assets_prefx"
# then you should:
#
config.asset_url_prefix = "http://asset.example.com/assets_prefx/" if Rails.env.production?

将上传文件信息记录入数据库（可选）

rails_kindeditor 可以将上传文件信息记录入数据库，以便扩展应用.

运行下面的代码，有两项选项：1.active_record
2.mongoid，默认是active_record。

rails generate rails_kindeditor:migration
or
rails generate rails_kindeditor:migration -o mongoid

运行下面的代码：

rake db:migrate

自动删除上传的文件(仅在active_record下工作)

你可以为上传的文件指定归属，比如一名用户，或者一篇文章，当用户或者文章被删除时，所有属于该用户或者该文章的上传文件将会被自动删除。

1.
为kindeditor指定owner_id

<%= form_for @article do |f| %>
...
<%= f.kindeditor :content, :owner => @article  %>
...
<% end %>

警告: @article应该事先被创建，@article.id不应该是空的。

2.
在你自己的模型里加入has_many_kindeditor_assets

class Article < ActiveRecord::Base
has_many_kindeditor_assets :attachments, :dependent => :destroy
# has_many_kindeditor_assets :attachments, :dependent => :nullify
# has_many_kindeditor_assets :your_name, :dependent => :destroy
end

3.
相互关系

article = Article.first
article.attachments # => the article's assets uploaded by kindeditor
asset = article.attachments.first
asset.owner # => aritcle

如果你使用的是mongoid,
请在你的Gemfile里加入'gem "carrierwave-mongoid"'

gem 'carrierwave-mongoid'

License

MIT License.

GIThub文档见：

https://github.com/Macrow/rails_kindeditor