wangEditor富文本编辑器自定义图片上传

wangEditorV4版本自定义图片上传

给大家推荐一个好用又轻量级的富文本编辑器wangEditor v4版本。wangEditor富文本的文档也比较全面，而且易上手。
文档地址：wangEditorV4

虽然文档想对来说比较详细但是在使用上传图片的过程还是遇到了一点点小问题在此记录下来

问题描述：
wangEditor自己在上传图片的时候直接上传到阿里云服务器跨域问题（wangEditor支持直接配置上传的地址进行图片上传，但是我门的图片不上传到自己的服务器而是推到阿里云，所以直接上传就会有跨域问题）。

wangEditor自己在上传图片的时候有下面几种方式：
1、通过base64 保存图片，因为保存的是base64格式所以在上传大文件的时候就有问题，可以在某些场景下使用。具体使用请看文档：base64图片上传
2、通过wangEditor配置服务端接口，还可以自定义上传参数、处理返回数据格式、上传前后钩子响应自己的逻辑等，文档写的比较详细具体可以看文档：wangEditor直接配置图片上传地址
3、在上述方法都不能满足你的需求的时候还可以支持完全自定义上传图片的方法（也就是我们使用的方法），然后只需要把返回的文件预览地址插入到编辑器中即可，请看完整代码和注释：

// 初始化富文本
initEditor (text) {const _that = this_that.editor = new wangEditor(this.$refs.wangEditor)_that.editor.config.placeholder = ''// 配置菜单_that.editor.config.menus = ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','list','justify','image']// 完全自定上传图片的配置项_that.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {// resultFiles 是选中的文件列表,使用resultFiles[0]获取上传的第一个文件对象// insertImgFn 是获取图片 url 后，插入到编辑器的方法// 下面函数的就是自己公司使用定义的上传文件的方法，参数为上传的图片const result = await _that.uploadHttp(resultFiles[0])// 上传图片成功后，将图片地址传入到insertImgFn方法中即可if (result.status === 200) insertImgFn(result.url)}_that.editor.config.showLinkImg = false// 配置 onchange 回调函数_that.editor.config.onchange = function (newHtml) {_that.textData = _that.editor.txt.text()// 引入js-xss库进行安全过滤_that.formData.content = xss(newHtml)console.log(newHtml)}// 配置触发 onchange 的时间频率_that.editor.config.onchangeTimeout = 500// 配置全屏功能按钮是否展示_that.editor.config.showFullScreen = false// 创建编辑器_that.editor.create()
},

wangEditor富文本编辑器自定义图片上传相关推荐

quill富文本编辑器自定义图片上传
github老哥的代码 const editor = new Quill('#quill-editor', {bounds: '#quill-editor',modules: {toolbar: th ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...

wangEditor富文本编辑器自定义图片上传

wangEditorV4版本自定义图片上传

wangEditor富文本编辑器自定义图片上传相关推荐

最新文章

热门文章