一个官网很详细的富文本编辑器

1. 官网地址，官网很详细，很简单易用。
2. npm 安装

// i 和 install区别：npm i 是 npm install 的简写
// npm i 安装的无法用npm uninstall卸载，得用npm uninstall i
// npm i 会检测与当前node版本最匹配得
// npm i 不一定有log
npm i wangeditor --save

3. 写一个实例注册文件并在里面配置src/utils/wangeditor.js

import E from "wangeditor"
import { getToken } from './localStorage'
import { baseUrl } from '../api/config'
export const createEditor = (editorDiv, onchange) => {
        let editor = new E(editorDiv)
        // onchange = (newHtml) => {
        //     // ...写内容变化之后的处理
        //		console.log(newHtml)
        //}
        editor.config.onchange = onchange
        editor.config.uploadImgServer = baseUrl + '/uploadFile'
        editor.config.uploadImgHeaders = {
                ['Access-Token']: getToken('Access-Token')
        };
        editor.config.uploadFileName = 'file'
        editor.config.uploadImgHooks = {
                before: function (xhr, editor, files) {
                        console.log(files)
                        // 图片上传之前触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                        // return {
                        //     prevent: true,
                        //     msg: '放弃上传'
                        // }
                },
                success: function (xhr, editor, result) {
                        console.log("上传图片结果1", result)
                        // 图片上传并返回结果，图片插入成功之后触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                        // this.imgUrl = Object.values(result.data).toString()
                },
                fail: function (xhr, editor, result) {
                        console.log(result)
                        // 图片上传并返回结果，但图片插入错误时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                        console.log(editor)
                        // 图片上传出错时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                        console.log(editor)
                        // 图片上传超时时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                        console.log("上传图片结果2", result)
                        console.log(editor)
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        insertImg(result.url)
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                }
        }
        editor.create()
        return editor
}

4. 页面组件内使用

<template>
	<div ref="editor"></div>
</template>
<script>
import { defineComponent, nextTick } from "vue";
import { createEditor } from "@/utils/wangEditer";
// 用的还是vue2的写法，vue3还是不很熟，就没有用
export default defineComponent({
	setup () {
		nextTick(() => {
			// ...
		})
	},
	data () {
		return {
			editorContent : '', // 文本内容
		}
	},
	methods: {
		// 注意要在mounted(){}中调用，或者thi.$nextTick(() => { this.initEditor() })
		initEditor () {
			let onchange = (newHtml) => {
        		this.editorContent = newHtml;
      		};
      		let editor = createEditor(this.$refs["editor"], onchange);
      		editor.txt.clear();
		}
	}
})
</script>