Vue2集成富文本组件WangEditor V5
软件开发
在网上找了很多文章，都没有完整的代码，官网的是伪代码，其他的版本不对，现在把我测试的代码发一下，方便以后查询。
1、安装WangEditor
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save2、模板
<template>
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</template>3、script
<script>
import Vue from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default Vue.extend({
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '<p>hello</p>',
toolbarConfig: { },
editorConfig: { placeholder: '请输入内容...' },
mode: 'default', // or 'simple'
}
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
}, 1500)
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
}
})
</script>
4、style
<style src="@wangeditor/editor/dist/css/style.css"></style>5、文件上传配置
editorConfig: {
placeholder: '请输入内容...',
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
uploadImage: {
// 后端上传地址，必填
server: "/api/upload/image",
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
fieldName: "file",
// 1M，单个文件的最大体积限制，默认为 2M
maxFileSize: 1 * 1024 * 1024,
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
// 15 秒，超时时间，默认为 10 秒
timeout: 15 * 1000,
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
// meta: {
// token: 'xxx',
// otherKey: 'yyy'
// },
// 将 meta 拼接到 url 参数中，默认 false
// metaWithUrl: false,
// 自定义增加 http header
// headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
// },
// 跨域是否传递 cookie ，默认为 false
// withCredentials: false,
},
uploadVideo: {
// 后端上传地址，必填
server: "/api/upload/video",
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-video
fieldName: "file",
// 5M，文件大小限制，默认10M
maxFileSize: 5 * 1024 * 1024,
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
// 15 秒，超时时间，默认为 30 秒
timeout: 15 * 1000,
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
// meta: {
// token: 'xxx',
// otherKey: 'yyy'
// },
// 将 meta 拼接到 url 参数中，默认 false
// metaWithUrl: false,
// 自定义增加 http header
// headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
// },
// 跨域是否传递 cookie ，默认为 false
// withCredentials: false,
}
}
},6、vue完整代码示例
<template>
<div>
<div>
<button @click="printEditorHtml">print html</button>
<button @click="insertTextHandler">insert text</button>
<button @click="disableHandler">disable</button>
</div>
<div style="border: 1px solid #ccc; margin-top: 10px;">
<!-- 工具栏 -->
<Toolbar style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode" />
<!-- 编辑器 -->
<Editor style="height: 400px; overflow-y: hidden;"
:defaultConfig="editorConfig"
v-model="html"
:mode="mode"
@onChange="onChange"
@onCreated="onCreated" />
</div>
<div style="margin-top: 10px;">
<textarea v-model="html"
readonly
style="width: 100%; height: 200px; outline: none;"></textarea>
</div>
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { createEditor, createToolbar } from '@wangeditor/editor'
export default {
name: 'MyEditor',
components: { Editor, Toolbar },
data () {
return {
editor: null,
html: '<p>hello world</p>',
toolbarConfig: {
// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
// excludeKeys: ["uploadVideo", "insertVideo"/* 隐藏哪些菜单 */],
},
editorConfig: {
placeholder: '请输入内容...',
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
uploadImage: {
// 后端上传地址，必填
server: "/api/upload/image",
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
fieldName: "file",
// 1M，单个文件的最大体积限制，默认为 2M
maxFileSize: 1 * 1024 * 1024,
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
// 15 秒，超时时间，默认为 10 秒
timeout: 15 * 1000,
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
// meta: {
// token: 'xxx',
// otherKey: 'yyy'
// },
// 将 meta 拼接到 url 参数中，默认 false
// metaWithUrl: false,
// 自定义增加 http header
// headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
// },
// 跨域是否传递 cookie ，默认为 false
// withCredentials: false,
},
uploadVideo: {
// 后端上传地址，必填
server: "/api/upload/video",
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-video
fieldName: "file",
// 5M，文件大小限制，默认10M
maxFileSize: 5 * 1024 * 1024,
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
// 15 秒，超时时间，默认为 30 秒
timeout: 15 * 1000,
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
// meta: {
// token: 'xxx',
// otherKey: 'yyy'
// },
// 将 meta 拼接到 url 参数中，默认 false
// metaWithUrl: false,
// 自定义增加 http header
// headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
// },
// 跨域是否传递 cookie ，默认为 false
// withCredentials: false,
}
}
},
mode: 'simple'
}
},
methods: {
onCreated (editor) {
this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
},
onChange (editor) {
console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
},
insertTextHandler () {
const editor = this.editor
if (editor == null) return
editor.insertText(' hello ')
},
printEditorHtml () {
const editor = this.editor
if (editor == null) return
console.log(editor.getHtml())
},
disableHandler () {
const editor = this.editor
if (editor == null) return
editor.disable()
}
},
mounted () {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = '<p>Ajax 异步设置内容 HTML</p>'
}, 1500)
},
beforeDestroy () {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
},
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
后端文件上传，网上有很多示例，就不放代码了，注意返回数据为：
{
"errno": 0, // 注意：值是数字，不能是字符串
"data": {
"url": "xxx", // 图片 src ，必须
"alt": "yyy", // 图片描述文字，非必须
"href": "zzz" // 图片的链接，非必须
}
}编辑于 2022-04-22 10:31