rails 整合百度编辑器ueditor

首先下载百度编辑器，ueditor

把编辑器放到public目录下， 我是下载的php版本， 在php版本中使用的路径为/ueditor/php/controller.php?action=config，

因为怕于rails的action冲突，我把action改为了act位于ueditor.all.js的大概8029行

后台读取数据我对textarea修改了下，

# frozen_string_literal: true
class JxcatFormBuilder < SimpleForm::FormBuilder
  delegate :content_tag, :link_to, :icon, :safe_join, :raw, to: :@template

  def wangeditor_picker(attribute_name, options = {})
    input(attribute_name, options) do
      content_tag :div, class: 'wangeditor-picker', data: options[:data] do
        value = object.send(attribute_name)

        textarea_tag = text_area attribute_name, class: 'wangeditor-picker-field', id: 'editor', value: value

        [textarea_tag].join&.html_safe
      end
    end
  end

end

然后前端使用<%= f.wangeditor_picker :content, label: "内容"%>获取内容

接下来集成ueditor，按照官网的方法，把css和js引入，并自定义上传链接

<script type="text/javascript">
  var ue = UE.getEditor('editor', {  
    initialFrameHeight: 500,   
    serverUrl: "/api/detail_uploads"  
  });  
</script>

上传使用了CarrierWave插件，具体可以看 git

上传图片：

配置基本的信息

class BaseUploader < CarrierWave::Uploader::Base
  
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  #storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  #def store_dir
  #  "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  #end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # def extension_whitelist
  #   %w(jpg jpeg gif png)
  # end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end


  # 在 UpYun 或其他平台配置图片缩略图
  # http://docs.upyun.com/guide/#_12
  # Avatar
  # 固定宽度和高度
  # xs - 32x32
  # sm - 48x48
  # md - 96x96
  # lg - 192x192
  #
  # Photo
  # large - 1920x? - 限定宽度，高度自适应
  ALLOW_VERSIONS = %w(xs sm md lg large)

  def store_dir
    dir = model.class.to_s.underscore
    # dir = "uploads/#{dir}"
  end

  def extension_white_list
    %w(jpg jpeg gif png svg flv swf wmv mp4)
  end

  def url(version_name = nil)
    @url ||= super({})
    return @url if version_name.blank?
    version_name = version_name.to_s
    unless version_name.in?(ALLOW_VERSIONS)
      raise "ImageUploader version_name:#{version_name} not allow."
    end
    # aliyun
    # super(thumb: "?x-oss-process=image/#{aliyun_thumb_key(version_name)}")
    [@url, version_name].join("!")
  end

  private

  def aliyun_thumb_key(version_name)
    case version_name
    when "large" then "resize,w_1920"
    when "lg"    then "resize,w_192,h_192,m_fill"
    when "md"    then "resize,w_96,h_96,m_fill"
    when "sm"    then "resize,w_48,h_48,m_fill"
    when "xs"    then "resize,w_32,h_32,m_fill"
    else
      "resize,w_32,h_32,m_fill"
    end
  end
end

上传图片：

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

end

根据ueditor的返回格式返回数据，格式参考ueditor的后台规范

# frozen_string_literal: true
module Api
  class DetailUploadsController < BaseController
    skip_before_action :require_login_from_token

    def uploads
      res = nil
      act = params[:act]
      case act
      when 'config'
        res = up_config
      when 'upload_image'
        img = upload_image
        res = {
          "state": "SUCCESS",
          "url": img['full_path'],
          "title": img['file_name'],
          "original": img['file_name'],
        }
      when 'upload_video'
        video = upload_video
        res = {
          "state": "SUCCESS",
          "url": video['full_path'],
          "title": video['file_name'],
          "original": video['file_name'],
        }
      when 'catch_image'
        img_list = catch_image
        res = {
          "state": "SUCCESS",
          "list": img_list
        }
      else
        res = {
          'state' => '请求地址出错'
        }
      end

      render json: res
    end

    private

    def up_config
      config = {
         "imageActionName" => "upload_image", # 执行上传图片的act名称 
          "imageFieldName" => "upfile", # 提交的图片表单名称 
          "imageMaxSize" => 2048000, # 上传大小限制，单位B 
          "imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".svg"], # 上传图片格式显示 
          "imageInsertAlign" => "none", # 插入的图片浮动方式 
          "imageUrlPrefix" => "", # 图片访问路径前缀 

          "catcherLocalDomain" => ["127.0.0.1", "localhost", "img.baidu.com"],
          "catcherActionName" => "catch_image", # 执行抓取远程图片的action名称 
          "catcherFieldName" => "source", # 提交的图片列表表单名称 
          "catcherUrlPrefix" => "", # 图片访问路径前缀 
          "catcherMaxSize" => 2048000, # 上传大小限制，单位B 
          "catcherAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], # 抓取图片格式显示 

          "videoActionName" => "upload_video", # 执行上传视频的action名称 
          "videoFieldName" => "upfile", # 提交的视频表单名称 
          "videoUrlPrefix" => "", # 视频访问路径前缀 
          "videoMaxSize" => 102400000, # 上传大小限制，单位B，默认100MB 
          "videoAllowFiles" => [".flv", ".swf", ".wmv", ".mp4"], # 上传视频格式显示 
      }
    end

    def upload_image
      myfile = DetailUploader.new
      file_version = myfile.store!(params[:upfile])
      full_path = myfile.url()
      file_name = myfile.filename
      res = {
        'full_path' => full_path,
        'file_name' => file_name
      }
    end 

    def upload_video
      myfile = VideoUploader.new
      file_version = myfile.store!(params[:upfile])
      full_path = myfile.url()
      file_name = myfile.filename
      res = {
        'full_path' => full_path,
        'file_name' => file_name
      }
    end 

    def catch_image
      #myfile = DetailUploader.new
      dir = "uploads/details/#{Time.now.year}#{Time.now.month}/"
      save_name = ''
      res_list = Array.new
      params[:source].each do |pic|
        #myfile.down_image(pic)
        save_name = Utils::Download.download_image(pic, dir)
        if save_name.present?
          res = {
            state: 'SUCCESS',
            url: save_name,
            size: pic.length,
            title: save_name,
            original: save_name,
            source: pic
          }
          res_list << res
        end
      end
      res_list
    end

  end
end

视频上传和图片上传一样