【富文本】wangeditor编辑器简单使用（自定义图片上传）

一、wangeditor

官网

二、引入

// 安装
npm i wangeditor --save// 使用
import E from "wangeditor"
const editor = new E("#div1")
editor.create()

三、使用

自定义上传图片，先转base64，转blob，上传服务器

<div id="wangeditor"><div ref="editorElem" style="text-align:left;" />
</div>

import E from 'wangeditor'
import axios from 'axios'// 初始化编辑器
updated() {this.setEditor()
},
// 函数
setEditor（）{const me = thisthis.editor = new E(this.$refs.editorElem)// 自定义上传图片this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法me.filesToBase64(resultFiles)}this.editor.config.menus = [// 菜单配置'head', // 标题'bold', // 粗体'italic', // 斜体'underline', // 下划线'link', // 插入链接'image', // 插入图片'undo', // 撤销'redo' // 重复]this.editor.create()
}//   转base64
filesToBase64(files) {const _this = thisfiles.map(item => {console.log(item)var reader = new FileReader()reader.onload = function(e) {_this.uploadImg(e.target.result, item)}// 传入一个参数对象即可得到基于该参数对象的文本内容reader.readAsDataURL(item)})
},// base64转blob
Base64toBlob({ base64, success }) {var arr = base64.split(',')var mime = arr[0].match(/:(.*?);/)[1]var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const blob = new Blob([u8arr], { type: mime })success(blob)
},// 上传图片
uploadImg(base64, file) {const _this = this// 自己的上传地址const uploadUrl = process.env.VUE_APP_BASE_API_UNIVERSAL + '/api/qiniu/upload'const formData = new FormData()this.Base64toBlob({base64,success(blob) {formData.append('file', blob, file.name)formData.append('open', true)// 调用axios上传const config = {headers: { 'Content-Type': 'multipart/form-data' }}axios.post(uploadUrl, formData, config).then((res) => {// 根据自己的后台逻辑进行判断if (res.data.code === 0) {_this.$message.success('图片上传成功！')// 上传图片，返回结果，将图片插入到编辑器中_this.editor.cmd.do('insertHtml','<img src="' + res.data.result + '" style="max-width:100%;"/>')} else {_this.$message({message: '文件服务异常，请联系管理员！',type: 'error'})}})}})
}

【富文本】wangeditor编辑器简单使用（自定义图片上传）相关推荐

使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
富文本编辑器三种不同图片上传功能
最近在集成富文本和fastDFS文服做图片上传,找了写相关资料,感觉官网的比较全也比较杂.刚好看到一片好的文章,然后我就转载并对不太详细的地方进行了一定的修改并新添加了一种前后端分离的方法.各位小伙 ...
vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
H5 编辑器 Tinymce之解决图片上传/粘贴
H5 编辑器 Tinymce之解决图片上传/粘贴 TinyMCE 5是一款功能强大且灵活的富文本编辑器,可以嵌入Web应用程序中. 1.在HTML代码中<head>标签中引入下边的代码块 ...
quill自定义图片上传
quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图 ...
wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...

【富文本】wangeditor编辑器简单使用（自定义图片上传）

一、wangeditor

二、引入

三、使用

【富文本】wangeditor编辑器简单使用（自定义图片上传）相关推荐

最新文章

热门文章