前言：富文本编辑器的插件网上有很多，有些需要二次开发，有些有框架的限制，也有些稳定性差。我这边开发中由于领导催的紧，所以为了提高一下自己的效率决定使用wangEditor，这个编辑器不需要二次开发，同时支持vue和react框架，编辑器的作者也是国内程序员，文档相对来说比较友好 官网：https://www.wangeditor.com/
一、安装
//安装 editor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save //安装Vue3 组件(可选) yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save
二、引用
这里editor是编辑器输入内容部门，toolbar是编辑器的菜单选项
三、使用
在vue3中引用之后就可以直接使用，vue2需要注册组件。这里演示vue3
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
<Editor style="height: 400px; overflow-y: hidden;" v-model="editorvalue" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
</div>
editorRef是编辑器实例
toolbarConfig是编辑器菜单配置项
editorvalue是编辑器输入的内容
editorConfig是编辑器的配置项
handleCreated 用于记录editor实例 很重要！！！
// 编辑器实例，必须用 shallowRef
const editorvalue = ref()
const editorRef = shallowRef()
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
到这里已经可以简单使用了，但是不能上传图片 MENU_CONF就是为了配置这些东西的，但在配置之前要先定义一个空对象
四、配置上传图片
editorConfig.MENU_CONF['uploadImage'] = {
server:'api-api-api',//服务端地址 必填
// form-data fieldName ，默认值 'wangeditor-uploaded-image'
fieldName: 'your-custom-name',
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 1 * 1024 * 1024, // 1M
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
meta: {
token: 'xxx',
otherKey: 'yyy'
},
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 自定义增加 http header
headers: {
Accept: 'text/x-json',
otherKey: 'xxx'
},
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 超时时间，默认为 10 秒
timeout: 5 * 1000, // 5 秒
}
这里配置的接口需要满足特定条件，我这里截一下官网的说明
满足这样的格式就可以直接使用了
如果你的服务端 response body 无法按照上述格式，可以使用下文的 customInsert
editorConfig.MENU_CONF['uploadImage'] = {
// 自定义插入图片
customInsert(res: any, insertFn: InsertFnType) { // TS 语法
// customInsert(res, insertFn) { // JS 语法
// res 即服务端的返回结果
// 从 res 中找到 url alt href ，然后插入图片
insertFn(url, alt, href)
},
}
加一个这样的配置就可以了
五、上传图片的回调函数
editorConfig.MENU_CONF['uploadImage'] = {
// 上传之前触发
onBeforeUpload(file: File) { // TS 语法
// onBeforeUpload(file) { // JS 语法
// file 选中的文件，格式如 { key: file }
return file
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress: number) { // TS 语法
// onProgress(progress) { // JS 语法
// progress 是 0-100 的数字
console.log('progress', progress)
},
// 单个文件上传成功之后
onSuccess(file: File, res: any) { // TS 语法
// onSuccess(file, res) { // JS 语法
console.log(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file: File, res: any) { // TS 语法
// onFailed(file, res) { // JS 语法
console.log(`${file.name} 上传失败`, res)
},
// 上传错误，或者触发 timeout 超时
one rror(file: File, err: any, res: any) { // TS 语法
// one rror(file, err, res) { // JS 语法
console.log(`${file.name} 上传出错`, err, res)
},
}
六、如果不想使用这里的上传图片功能，也可以使用自己的
editorConfig.MENU_CONF['uploadImage'] = {
// 自定义上传
async customUpload(file: File, insertFn: InsertFnType) { // TS 语法
// async customUpload(file, insertFn) { // JS 语法
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
// 最后插入图片
insertFn(url, alt, href)
}
}
七、结尾
由于开发进度催的紧，很多api和功能也没来得及尝试，上传视频和上传图片用起来差不多，整体用起来还是很不错的，开发效率嘎嘎的，我得继续去赶进度了（流泪的黑奴），晚点会更新遇到的一些问题，欢迎各位大佬留言
标签：文本编辑,res,语法,编辑器,editor,file,Vue3,后台,上传 From： https://www.cnblogs.com/ljyn/p/16877936.html