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或者后端上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。