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'
puts "dd"
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
params[:source].each do |pic|
#myfile.down_image(pic)

end

end

end
end

视频上传和图片上传一样