Rails中使用CoffeeScript集成Simditor与ActiveStorage的正确姿势(Rails, CoffeeScript， Simditor, and ActiveStorage)

找Rails靠谱的编辑器是不是找了好久了？别找了，就用Simditor吧。
要如何在Rails中完美集成这样一个简洁大气又好用的编辑器呢？我们都知道，在高版本的Rails中使用CoffeeScript已经成为了一种习惯。所以本文将以CoffeeScript作为粘合剂来演示如何集成Simditor编辑器到Rails应用中，同时采用Rails原生的ActiveStorage作为上传支撑。

事先声明下我的环境配置：
Ruby: ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]
Rails: Rails 5.2.2

1. 准备工作

首先我们新建一个Rails项目，在命令行中，运行rails new Demo，待工程创建好以后我们进入Demo目录，新建一个脚手架。这里我们就以Article作为脚手架的名字，运行rails g scaffold Article title:string content:text

创建好之后，运行rails db:migrate，迁移数据库

此时，将simeditor添加到Gemfile中。修改Gemfile，加入以下内容并执行bundle（simditor需要jquery的支持）。

gem 'jquery-rails'
gem 'simditor'

并在app/assets/javascripts/application.js中加入simditor的引用，此处需要注意，下面两行代码需要添加在//= require_tree这行代码之前，否则会出错。

//= require jquery
//= require simditor
//= require_tree .

同时需要在app/assets/stylesheets/application.css中加入simditor的样式文件：

*= require simditor

启动Rails应用，在浏览器中访问/articles/new，此时的界面如下：

到这里，准备工作就完成了。

2. 修改编辑框，集成Simditor

按照Rails的命名惯例，此处编辑框textarea的ID是article_content，我们的CoffeeScript脚本中，则需用选择器来绑定这个text_area。

修改app/assets/javascripts/article.coffee，加入以下内容：

$(document).on "turbolinks:load", ->
    editor = new Simditor(
        textarea: $('#article_content')
        toolbar: [ 'bold', 'italic', 'underline', 'strikethrough', 'color',
            'code', 'blockquote', 'link', 'image', 'ol', 'ul', 'table', 'indent','outdent','alignment']
        pasteImage: true,
        fileKey: 'file',
        upload: {
            url: '/images',
            params: {"content":"image"},
            connectionCount: 3,
            leaveConfirm: '有图片正在上传，确定要离开?'
    })

再次在浏览器中访问/articles/new，界面变成了这样：

此时Simditor已经集成到了应用中了。

3. 使用ActiveStorage配置上传功能

ActiveStorage是Rails 5.2 以后推出的用于专门管理Web上传内容的组件，和ActiveRecord一样，是一个很方便同时又很强大的Rails Web开发组件。想要集成基于ActiveStorage的上传功能，首先要在我们的应用中安装ActiveStorage：

运行rails active_storage:install然后再运行rails db:migrate:

root@debian:~/Demo# rails active_storage:install
Copied migration 20190327123314_create_active_storage_tables.active_storage.rb from active_storage
root@debian:~/Demo# rails db:migrate
== 20190327123314 CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs)
   -> 0.0050s
-- create_table(:active_storage_attachments)
   -> 0.0027s
== 20190327123314 CreateActiveStorageTables: migrated (0.0086s) ===============

迁移完成以后，我们新建一个Upload控制器，使用rails g controller Upload命令生成它。修改Upload控制器代码，位于app/controllers/upload_controller.rb，添加一个upload方法：

#app/controllers/upload_controller.rb
class UploadController < ApplicationController

  skip_before_action :verify_authenticity_token, :only => [:upload]

  def upload

    puts "*"*64
    puts params

    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:image],
      filename: params[:image].original_filename,
      content_type: params[:image].content_type
    )

    if blob.save
      success = true
      msg = 'upload success'
    else
      success = false
      msg = "upload error"
    end

    render json: { :success=> success, :msg=>msg, :file_path=> rails_blob_path(blob) }

  end

end

修改路由配置文件，指定我们的上传路由：

#config/routes.rb
Rails.application.routes.draw do
  post 'images/upload' => 'upload#upload'
  resources :articles
  root to: 'articles#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

还要稍微修改一下我们的articles.coffee文件，改一下其中的上传路径和参数，用于Ajax提交图片：

//app/assets/javascripts/articles.coffee
$(document).on "turbolinks:load", ->
    editor = new Simditor(
        textarea: $('#article_content')
        toolbar: [ 'bold', 'italic', 'underline', 'strikethrough', 'color',
            'code', 'blockquote', 'link', 'image', 'ol', 'ul', 'table', 'indent','outdent','alignment']
        pasteImage: true,
        fileKey: 'file',
        upload: {
            url: '/images/upload', //<==上传接口
            fileKey: 'image', //<=参数名称
            params: {"content":"image"},
            connectionCount: 3,
            leaveConfirm: '有图片正在上传，确定要离开?'
    })

至此，已经可以在页面中正常地上传文件了，也可以直接从粘贴板复制文件，Simditor会自动上传文件：

本文涉及到的代码已经上传到Github，仓库链接：https://github.com/Chorder/RailsSimditorActiveStorageDemo