wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传

wangEditor是一款优秀的国产编辑器。

轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

但是自身带的图片上传在上传七牛云可能存在版本问题。还有如果是其他云的JS上传图片的话就爱莫能助了，好在wangEditor提供了丰富的API可以换一种思路来实现。

1:使用提供的API 接口：

editor.customConfig.customUploadImg = function (files, insert) {// files 是 input 中选中的文件列表// insert 是获取图片 url 后，插入到编辑器的方法// 上传代码返回结果之后，将图片插入到编辑器中insert(imgUrl)
}

这里可以拦截到上传前的图片信息然后调用自己的上传文件方法，最后，插入到编辑器中，

2：取巧，自定义图标上传图片：

文末粘贴全部代码

编辑器外层封一层DIV，
添加一个图标(真正上传需要图标里隐藏添加一个input用来选择文件，这里不写了，麻烦)
CSS绝对定位
给图标添加点击事件，实现上传逻辑

<div class="top-div"><span class="el-icon-picture uploadimg" @click="uploadimg"></span><div ref="editor" style="text-align:left"></div></div>

这里代码很简单。我们只是多添加了两组元素

编写样式：

<style scoped>.top-div{position: relative;width: 50%;margin: 0 auto;}
.uploadimg{position: absolute;color: rgb(153,153,153);font-size: 20px;top: 6px;left: 159px;
}
</style>

然后就简单了。直接给图标绑定上传事件：

<span class="el-icon-picture uploadimg" @click="uploadimg"></span>

然后在事件中（此处打开资源管理器选择图片，进行上传忽略）图片上传完成后获取到图片的URL即可。

uploadimg(){//  do something  这里用js上传完成之后获取到图片地址let url = "http://119.254.155.37:8080/img/home/zhenwutu%402x.png"//  调用编辑器api插入图片this.editor.cmd.do('insertHTML', '<img src="'+url+'" alt="" width="100px" height="200px">')}

全部代码：

<template><div class="top-div"><span class="el-icon-picture uploadimg" @click="uploadimg"></span><div ref="editor" style="text-align:left"></div></div>
</template><script>import E from 'wangeditor'export default {name: "appEditArt",data() {return {editor: null,}},mounted() {this.seteditor();},methods: {seteditor() {this.editor = new E(this.$refs.editor);this.editor.customConfig.menus = ['head','bold','italic','underline']// 创建富文本编辑器this.editor.create()},uploadimg(){//  do something  这里用js上传完成之后获取到图片地址let url = "http://119.254.155.37:8080/img/home/zhenwutu%402x.png"//  调用编辑器api插入图片this.editor.cmd.do('insertHTML', '<img src="'+url+'" alt="" width="100px" height="200px">')}},}
</script><style scoped>.top-div{position: relative;width: 50%;margin: 0 auto;}
.uploadimg{position: absolute;color: rgb(153,153,153);font-size: 20px;top: 6px;left: 159px;
}
</style>

wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传相关推荐

php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
html按钮返回上一步操作,用js实现返回上一步操作
按钮式: onClick="location.href='http://www.ddhbb.com/'"> 链接式: href="javascript:histor ...
js文件上传不用点击上传按钮自动上传
不需要点击上传按钮,选择文件后直接上传: <script> function submitform(){ document.form01.action="upload.php&q ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
第一步 components里面新建一个manyImgUpload.vue组件,将以下代码放入以下代码中需要你改的地方 uni.uploadFile中的参数,url为你公司的上传接口.files为你 ...
wangeditor自定义图片视频上传
wangeditor自定义图片视频上传完整代码 <template><div style="border: 1px solid #ccc;height: 100%;&qu ...
CSS自定义文件上传按钮
原文:CSS自定义文件上传按钮今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: ...
关于elementui上传图片隐藏上传按钮
做MIS端或者APP,上传图片,利用的是饿了么组件库里面的上传文件,为了用户体验度好一点当达到要求上传图片的上限时隐藏上传按钮,清除图片显示按钮效果图如下: 首先F12找到上传图片按钮的class ...
el-upload 自定义请求上传图片，达到上传数量限制后，隐藏图片上传框
需求:1.图片上传请求的时候使用自定义 2.上传数量1张,上传了1张之后,隐藏上传框步骤: 1.把 action 赋值为#字符串添加 :http-request" 3.通过添加disab ...

wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传

wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传相关推荐

最新文章

热门文章