VUE中的富文本编辑器

富文本编辑器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;
                    let param = new FormData();
                    param.append('action', 'UploadFiles');
                    param.append('fileName', resultFiles[0]);
                    axios({
                        url: '/ashx/SealRecord.ashx',
                        method: 'post',
                        data: param,
                    })
                        .then(function (res) {
                            console.log(res)
                            if (res.data.state == 10001) {
                                that.imgUrl = res.data.data.domin + res.data.data.url
								//insertImgFn是把返回的图片插入到富文本编辑器中
                                insertImgFn(that.imgUrl)
                            } else {
                                that.$message({
                                    message: res.data.msg,
                                });
                            }

                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                }

                this.editor.create()
}

that.editor.txt.html() 这个就是整个富文本内容输出的 that指向是因为在data里定义的editor

富文本页面输出的也是html格式