Integrate simditor to ROR project with image upload

最近在开发一个用于自己写技术文章的平台,需要有一个让自己快乐写作的编辑器,之前使用的是pagedown的编辑器,使用pagedown-bootstrap-rails这个gem可以很方便在在rails上集成一个比较漂亮的markdown编辑器,但是有一个问题,markdown这种语法度很高的写作语言,还大部分的流行在IT程序员当中,工业领域的工程师是相对比较传统的,习惯使用传统的编辑器,这让我萌生了更换编辑的想法,于是在ruby-china发了一个帖子有推荐一下好用的 Rails editor 吗?,社区大大力推荐我使用simditor,惊艳啊!于是立马迁移!

ROR的环境

  • 'rails', '4.1.8'
  • 'Ruby'. '2.1.5'
  • OSx 10.10.5

步骤

  1. Gemfile里面加入一行gem 'simditor'
  2. bundle install安装这个simditor这个gem,已经打包好所有simditor需要用的assets了
  3. application.js里面加上:

    //= require simditor //= require simditor/simditor-fullscreen 注:我还加了一个simditor-fullscreen的插件,使用esc切换全屏,方法专注于写作

  4. application.css里面加上*= require simditor
  5. _form.html.erb可以这么写:

{% highlight ruby %}

<%= form_for(@post) do |f| %>
<%= f.text_field :body, :type=> 'hidden'%>
<%= f.submit t('posts.post'), :class => 'btn-u btn-lg' %>
<% end %>
<% end %>


{% highlight%} 注:在textfield里面一定要加一个:type=> 'hidden',要不然会有另外一个input显示出来。

集成图片上传

我的方案是需要在写文章的时候上传图片,容易写图文混排的技术文章,步骤:

  1. 新建一个photosController.rb,写一个uploadaction用来处理图片上传
  2. 新建一个migration,创建一个photostable用来存储图片信息
  3. 新建一个photos.rb
  4. routes.rb里面加上图片上传的路由POSTpost 'photos' => 'photos#upload'
  5. 新建一个photo_uploader.rb,使用CarrierWave和MiniMagick用来处理文件上传和图片处理过程,需要两个gem:gem 'carrierwave','0.6.2'
    gem 'mini_magick'
  6. user.rb里面加入has_many :photos
  7. 相关代码如下:
# PhotosController.rb
class PhotosController < ApplicationController  
    before_action :authenticate_user!
    def upload
        @photo = Photo.new
        @photo.image = params[:upload_file]
        @photo.user_id = current_user.id
        success = true
        msg = '上传成功'
        file_path = ''
        if @photo.save
            success=true
          render json: { :success=> success, :msg=>msg, :file_path=> @photo.image.url }
        else
            success=false
          render json: { :success=> false }
        end
    end
end  
#Createphotos.rb
class CreatePhotos < ActiveRecord::Migration  
  def change
    create_table :photos do |t|
      t.string :image
      t.timestamps
    end
    add_column :photos,:user_id,:integer
      add_index :photos, :user_id
  end
end
#photo.rb
class Photo< ActiveRecord::Base  
 belongs_to :user
 validates :user_id, presence: true
 validates :image, presence: true
 mount_uploader :image, PhotoUploader
end  
#photo_uploader.rb
class PhotoUploader < CarrierWave::Uploader::Base  
include CarrierWave::MiniMagick  
  storage :file
  process resize_to_limit: [640, nil]
  def store_dir
    "photos/"
  end
  def filename
    if super.present?
      @name ||= Digest::MD5.hexdigest(current_path)
      "[email protected]}.#{file.extension.downcase}"
    end
  end
  def extension_white_list
    %w(jpg jpeg gif png)
  end
end  

钱涌

智能制造师
Email: [email protected]

Hangzhou,China http://qianyong.me