Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Kindeditor for Ruby on Rails

README.md

Kindeditor for Ruby on Rails Gem Version

Kindeditor is a WYSIWYG javascript editor, visit http://www.kindsoft.net for details. rails_kindeditor will helps your rails app integrate with kindeditor, includes images and files uploading.

rails_indeditor

Installation and usage

Add this to your Gemfile

  gem 'rails_kindeditor'

Run "bundle" command.

  bundle

Run install generator:

  rails generate rails_kindeditor:install

notice: rails_kindeditor needs applications.js in your project.

Rails4 in production mode

In Rails 4.0, precompiling assets no longer automatically copies non-JS/CSS assets from vendor/assets and lib/assets. see https://github.com/rails/rails/pull/7968 In Rails 4.0's production mode, please run 'rake kindeditor:assets', this method just copy kindeditor into public folder.

  rake kindeditor:assets

Usage:

  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 %>

You can use kindeditor's initial parameters as usual, please visit http://www.kindsoft.net/docs/option.html for details.

additionally, rails_kindeditor provides one "simple_mode" parameter for render simple mode quickly.

simple mode

  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

That's all.

Work with turbolinks

rails_kindeditor will not load the scripts under the turbolinks, there's two way to solve this problem:

1.use "'data-no-turbolink' => true" when we need to load kindeditor,this will shut down the turbolinks in this page

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

2.load kindeditor manually, but you should specify the parameters again, include the textarea's 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 mode

  # 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"]

When you need to specify the owner_id:

f.kindeditor :content, owner_id: @article.id, data: {upload: kindeditor_upload_json_path(owner_id: @article.id), filemanager: kindeditor_file_manager_json_path}
  # 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')

Include javascript files at bottom ? Not in the head tag ? How can I load kindeditor correctly ?

For some reasons, you includes javascript files at bottom in your template, rails_kindeditor provides a options for lazyload:

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

Warning: Kindeditor will load after all the objects loaded.

SimpleForm and Formtastic integration

simple_form:

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

formtastic:

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

How to get kindeditor's content

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

You can get content like this:

  // Javascript code
  my_editor.html();

Upload options configuration

When you run "rails generate rails_kindeditor:install", installer will copy configuration files in config/initializers folder. You can customize some option for uploading.

  # Specify the subfolders in public directory.
  # You can customize it , eg: config.upload_dir = 'this/is/my/folder'
  config.upload_dir = 'uploads'

  # Allowed file types for upload.
  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]

  # Porcess upload image size, need mini_magick
  #     before    => after
  # eg: 1600x1600 => 800x800
  #     1600x800  => 800x400
  #     400x400   => 400x400 # No Change
  # config.image_resize_to_limit = [800, 800]

Asset host options configuration

  # 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?

Save upload file information into database(optional)

rails_kindeditor can save upload file information into database.

Just run migration generate, there are two ORM options for you: 1.active_record 2.mongoid, default is active_record.

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

The generator will copy model and migration to your application. When you are done, remember run rake db:migrate:

  rake db:migrate

Delete uploaded files automatically (only for active_record)

You can specify the owner for uploaded files, when the owner was destroying, all the uploaded files(belongs to the owner) will be destroyed automatically.

1. specify the owner_id for kindeditor

   <%= form_for @article do |f| %>
     ...
     <%= f.kindeditor :content, :owner_id => @article.id  %>
     ...
   <% end %>
Warnning: the @article must be created before this scene, the @article.id should not be empty.

2. add has_many_kindeditor_assets in your own model

  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. relationship

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

If you're using mongoid, please add 'gem "carrierwave-mongoid"' in your Gemfile

  gem 'carrierwave-mongoid'

License

MIT License.

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_id: @article.id, data: {upload: kindeditor_upload_json_path(owner_id: @article.id), filemanager: kindeditor_file_manager_json_path}
  # 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_id => @article.id  %>
     ...
   <% 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.

Something went wrong with that request. Please try again.