rails_wangeditor will helps your rails app integrate with wangEditor, including images uploading.

gem install rails_wangeditor -v 0.1.9


wangEditor for Ruby on Rails Gem Version

wangEditor is an easy, fast and beautiful WYSIWYG javascript editor, visit https://github.com/wangfupeng1988/wangEditor for details. rails_wangeditor will helps your rails app integrate with wangEditor, includes images uploading.

Installation and usage

Add this to your Gemfile

  gem 'rails_wangeditor', '>= 0.1.3'

Run "bundle" command.


Run install generator:

  rails generate rails_wangeditor:install

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 wangeditor:assets', this method just copy wangeditor into public folder.

  rake wangeditor:assets


  1. <%= wangeditor_tag :content, 'default content value' %>
     # or <%= wangeditor_tag :content, 'default content value', :input_html =>{style: "height: 300px"} %>
  2. <%= form_for @article do |f| %>
       <%= f.wangeditor :content %>
       # or <%= f.wangeditor :content, style: "height: 300px"%>
     <% end %>

When you need to specify the owner_id:

<%= f.wangeditor :content, owner: @article%>

SimpleForm integration


  <%= f.input :content, as: :wangeditor, :label => "正文",  :owner_id => current_user.id, :input_html => {style: "height: 300px" } %>

Upload options configuration

When you run "rails generate rails_wangeditor: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]

  # replace to your own baidu mapAk
  config.mapAk = 'zlXbfvvyWN0vrO5toWqGhLspGHMIeFgn';

  # 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_wangeditor 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_wangeditor:migration
  rails generate rails_wangeditor: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 wangeditor

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

####2. add has_many_wangeditor_assets in your own model

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

####3. relationship

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

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

  gem 'carrierwave-mongoid'



MIT License.