ruby homeland 集成wangEditor实现图片上传

本文主要是介绍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.wangEditorvar 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 = 50editor.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 < BaseUploaderdef store_dirif Setting.upload_provider == "file"dir = "uploads/details"enddirend# Override the filename of the uploaded files:def filenameif super.present?@name ||= SecureRandom.uuid"#{Time.now.year}/#{@name}.#{file.extension.downcase}"endend
end

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

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

module Apimodule V3class UploadsController < Api::V3::ApplicationControllerdef uploadsres = Array.newparams.delete('controller')params.delete('action')params.values.each do |file|myfile = DetailUploader.newfile_version = myfile.store!(file)full_path = myfile.url()res << full_pathendrender json: {errno: 0,data: res}endendend
end

这篇关于ruby homeland 集成wangEditor实现图片上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---