rails 整合百度編輯器ueditor
阿新 • • 發佈:2018-12-31
把編輯器放到public目錄下, 我是下載的php版本, 在php版本中使用的路徑為/ueditor/php/controller.php?action=config,
因為怕於rails的action衝突,我把action改為了act位於ueditor.all.js的大概8029行
後臺讀取資料我對textarea修改了下,
然後前端使用<%= f.wangeditor_picker :content, label: "內容"%>獲取內容# 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
接下來整合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
視訊上傳和圖片上傳一樣