1.效果
富文本编辑器
2.安装
npm i wangeditor --save
3.引用
在用到的页面中
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
4.使用
template
<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>
script
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import { Message } from "element-ui"
export default {
name: "TestEditor",
components: { Editor, Toolbar },
//获取的父组件传参
props: ["module","outsidehtml"],
data() {
return {
moduleName: "", //模块名称
// 表单
Form: {},
// 存储编辑器
editor: null,
// 展示
html: "<p>hello</p>",
// 工具栏配置
toolbarConfig: {},
// 编辑器配置
editorConfig: {
placeholder: "请输入内容...",
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
// 图片上传
uploadImage: {
server:"接口" ,
//上传的文件名
fieldName: "multipartFile",
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 2 * 1024 * 1024, // 10M
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["image/*"],
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
meta: {
// token: 'xxx',
// otherKey: 'yyy'
model: "",
},
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 自定义增加 http header
headers: {
// Accept: 'text/x-json',
// otherKey: 'xxx'
},
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 超时时间，默认为 10 秒
timeout: 10 * 1000, //10 秒
// 上传前
onBeforeUpload(files) {
Message({
message: "图片正在上传中,请耐心等待",
duration: 0,
customClass: "uploadTip",
iconClass: "el-icon-loading",
showClose: true,
})
return files
},
// 自定义插入图片
customInsert(res, insertFn) {
// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
// 先关闭等待的Message
Message.closeAll()
if (res.status === 200) {
Message.success({
message: res.message,
})
} else {
Message.error({
message: `${res.message}，请重新尝试`,
})
}
insertFn(res.data, res.data.name, res.data)
},
},
// 视频上传
uploadVideo: {
fieldName: "file",
server: "接口",
// 单个文件的最大体积限制，默认为 10M
maxFileSize: 50 * 1024 * 1024, // 50M
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["video/*"],
// 自定义上传参数，例如传递验证的 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,
// 超时时间，默认为 30 秒
timeout: 1000 * 1000, // 1000 秒,
// 上传之前触发
onBeforeUpload(file) {
Message({
message: "视频正在上传中,请耐心等待",
duration: 0,
customClass: "uploadTip",
iconClass: "el-icon-loading",
showClose: true,
})
return file
},
// 自定义插入视频
customInsert(res, insertFn) {
// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
// 先关闭等待的Message
Message.closeAll()
if (res.code === 200) {
Message.success({
message: `${res.data.originalName} 上传成功`,
})
} else {
Message.error({
message: `${res.data.originalName} 上传失败，请重新尝试`,
})
}
insertFn(res.data.link, res.data.link)
},
// 上传错误，或者触发 timeout 超时
onError(file) {
Notification.error({
title: "错误",
message: `${file.name} 上传失败，请重新尝试`,
})
},
},
},
},
// 开发模式
mode: "default", // or 'simple'
}
},
methods: {
/**
* @description: 获取富文本器输入的内容
* @return {*}
*/
sendPage() {
const editor = this.editor
if (editor == null) return
this.Form.content = editor.getHtml()
},
/**
* @description:创建
* @param {*} editor
* @return {*}
*/
onCreated(editor) {
// 使用 Object.seal() 封闭编辑器对象，以防止进一步修改
this.editor = Object.seal(editor)
},
},
mounted() {
this.editorConfig.MENU_CONF.uploadImage.meta.model = this.module
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = this.outsidehtml
}, 500)
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
},
}
</script>
style
<style src="@wangeditor/editor/dist/css/style.css"></style>
