Kindeditor for Ruby on Rails

kindeditor_config.js

//kindeditor setting base on bbtang.com
KindEditor.options.items=["emoticons", "|", "forecolor", "hilitecolor", "fontsize", "bold", "strikethrough", "justifyleft", "justifycenter", "justifyright", "|", "image", "multiimage", "table",  "link", "unlink"]

KindEditor.options.pasteType=1

KindEditor.options.htmlTags = {
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height', '.border-collapse'
        ],
        'tbody,tr,b': [
                'align', '.text-align', '.vertical-align'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        hr : ['class', '.page-break-after'],
        'br,strong,sub,sup,em,i,u,strike,s,del' : []
}


//KindEditor.options.showRemote=false
//KindEditor.options.items= ["source", "|", "undo", "redo", "|", "preview", "print", "template", "code", "cut", "copy", "paste", "plainpaste", "wordpaste", "|", "justifyleft", "justifycenter", "justifyright", "justifyfull", "insertorderedlist", "insertunorderedlist", "indent", "outdent", "subscript", "superscript", "clearhtml", "quickformat", "selectall", "|", "fullscreen", "/", "formatblock", "fontname", "fontsize", "|", "forecolor", "hilitecolor", "bold", "italic", "underline", "strikethrough", "lineheight", "removeformat", "|", "image", "multiimage", "flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak", "anchor", "link", "unlink", "|", "about"]

rails_kindeditor_how_to.markdown

Kindeditor for Ruby on Rails

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.

Deprecation: rails_kindeditor ~> v0.3.0 only support Rails3.1+!(include Rails3.1 and Rails3.2) If you're using rails3.0.x, please check rails_kindeditor v0.2.8

Installation and usage

Add this to your Gemfile

  gem 'rails_kindeditor', '~> 0.3.0'

Run "bundle" command.

  bundle

Run install generator:

  rails generate rails_kindeditor:install

Include kindeditor javascripts for assets pipeline in your application.js:

  //= require kindeditor

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

That's all.

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

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   => 800x800
  # config.image_resize_to_fit = [800, 800]

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

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,包括了图片和附件上传功能，文件按照类型、日期进行存储。

注意: 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.0'

运行"bundle"命令：

  bundle

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

  rails generate rails_kindeditor:install

在application.js里面为assets pipeline加入以下代码:

  //= require kindeditor

使用方法:

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

完毕！

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

上传图片及文件配置

当你运行"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   => 800x800
  # config.image_resize_to_fit = [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'

  <%= f.kindeditor :body,{width: "99%",allowFileManager: false}%>

License

MIT License.