ruby homeland 集成wangEditor实现图片上传

首先把wangEditor集成进来

<script type="text/javascript" src="https://unpkg.com/wangeditor@3.0.15/release/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入图片
      'table',  // 表格
    ]
    editor.customConfig.zIndex = 50
    editor.customConfig.uploadImgServer = '/api/v3/detail_uploads'
    editor.customConfig.uploadImgHooks = {
        
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            console.log('success');
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            console.log('fail');
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            console.log('error');
        },
        
    }
    editor.customConfig.onchange = function (html) { 
      $("#topic_body").val(html)
    }
    editor.create()
</script>

uploadImgServer 表示服务器上传url

uploadImgHooks上传监听

rails generate uploader Myuploader

homgland已经集成了carrierwave，在app/uploaders下已经有PhotoUploader

新建一个文件，如detail_uploader.rb，

class DetailUploader < BaseUploader
  def store_dir
    if Setting.upload_provider == "file"
      dir = "uploads/details"
    end
    dir
  end
  # Override the filename of the uploaded files:
  def filename
    if super.present?
      @name ||= SecureRandom.uuid
      "#{Time.now.year}/#{@name}.#{file.extension.downcase}"
    end
  end
end

因为我是在编辑器上传图片，所以不需要使用模型绑定那种方式上传，直接定义上传目录就可以了。

对应的上传代码：app/controller/api/v3/uploads_controller.rb

module Api
  module V3
    class UploadsController < Api::V3::ApplicationController

      def uploads
        res = Array.new
        params.delete('controller')
        params.delete('action')

        params.values.each do |file|
          myfile = DetailUploader.new
          file_version = myfile.store!(file)
          full_path = myfile.url()
          res << full_path
        end
       
        render json: {
          errno: 0,
          data: res
        }
      end
    end
  end
end