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

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>

最后

以上就是灵巧嚓茶为你收集整理的一个官网很详细的富文本编辑器的全部内容，希望文章能够帮你解决一个官网很详细的富文本编辑器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。