VUE中的富文本编辑器

真的不想哇

于 2021-03-15 16:17:57 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 富文本编辑器

本文链接：https://blog.youkuaiyun.com/xiaoHelloWord/article/details/114837816

富文本编辑器wangEditor
官方链接

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

我这里进行的是页面CDN引入的方式
页面是VUE的写法

<div id="div1"></div>
在页面创建一个DIV其中ID名字
在data里定义的
editor:'',


 this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {}方法是自定义上传图片
 resultFiles是上传返回的文件流
 里面的axios 是上传的接口
mounted(){
	 const E = window.wangEditor
                this.editor = new E("#div1")
                this.editor.config.uploadImgServer = '/upload-img'
                this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                    console.log(resultFiles)
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    // 上传图片，返回结果，将图片插入到编辑器中


                    let that = this;
                    le