rails 富文本编辑器

lihaoningxia 2015-04-07

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

注意: rails_kindeditor ~> v0.3.0 仅支持Rails3.1+!当然,包括Rails3.1和Rails3.2. 如果你使用rails3.0.x,请使用rails_kindeditor v0.2.8

安装及使用

将下面代码加入Gemfile:

gem 'rails_kindeditor', '~> 0.3.11'

运行"bundle"命令:

bundle

安装Kindeditor,运行下面的代码:

rails generate rails_kindeditor:install

使用方法:

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_tag :content, :simple_mode => true
  f.input :content, :as => :kindeditor, :input_html => { :simple_mode => true } # simple_form & formtastic

完毕!

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]

将上传文件信息记录入数据库(可选)

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

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

gem 'carrierwave-mongoid'

License

MIT License.

 

相关推荐

AllenYoung / 0评论 2014-07-04
jizhename / 0评论 2013-09-03