官网地址：wangEditor
<template>
<div class="box">
<div class="boxs">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 300px; overflow-y: hidden"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
</div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css";
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default Vue.extend({
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '<p><br></p><div data-w-e-type="video" data-w-e-is-void>\n<video poster="https://lhybapp.xxhpt.cn/profile/upload/2023/08/16/20230816102149A042.jpg" controls="true" width="auto" height="auto"><source src="https://lhybapp.xxhpt.cn/profile/upload/2023/08/16/20230816142628A050.mp4" type="video/mp4"/></video>\n</div><p><span style="color: rgb(9, 109, 217); font-size: 19px;">当绚丽的朝霞辉映天际，</span></p><p><br></p><p><span style="color: rgb(56, 158, 13); font-size: 22px;">我看到了你，美丽中国；</span></p><p><br></p><p>当清脆的鸟鸣萦绕耳畔，</p><p><br></p><p>我听到了你，美丽中国；</p><p><br></p><p>当花草的馨香扑面而来，</p><p><br></p><p>我嗅到了你，美丽中国；</p><p><br></p><p>走进这些画面，</p><p><br></p><p>我拥抱着你，美丽中国。</p><p><img src="https://lhybapp.xxhpt.cn/profile/upload/2023/08/16/20230816102149A042.jpg" alt="" data-href="https://lhybapp.xxhpt.cn/profile/upload/2023/08/16/20230816102149A042.jpg" style="width: 30%;"/></p>',
toolbarConfig: {},
editorConfig: {
placeholder: "请输入内容...",
MENU_CONF: {
uploadImage: {
server: "你的地址",
// form-data fieldName ，默认值 'wangeditor-uploaded-image'
fieldName: "file",
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 1 * 1024 * 1024, // 1M
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["image/*"],
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 超时时间，默认为 10 秒
timeout: 5 * 1000, // 5 秒
// 上传之前触发
onBeforeUpload(file) {
// TS 语法
// onBeforeUpload(file) { // JS 语法
// file 选中的文件，格式如 { key: file }
return file;
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress) {
// TS 语法
// onProgress(progress) { // JS 语法
// progress 是 0-100 的数字
console.log("progress", progress);
},
// 单个文件上传成功之后
onSuccess(file, res) {
// TS 语法
// onSuccess(file, res) { // JS 语法
console.log(`${file.name} 上传成功`, res);
},
// 单个文件上传失败
onFailed(file, res) {
// TS 语法
// onFailed(file, res) { // JS 语法
console.log(`${file.name} 上传失败`, res);
},
// 自定义插入图片
customInsert(res, insertFn) {
console.log(99999977777, res);
// TS 语法
// customInsert(res, insertFn) { // JS 语法
// res 即服务端的返回结果
// 从 res 中找到 url alt href ，然后插入图片
insertFn(res.url, "", res.url);
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
// TS 语法
// onError(file, err, res) { // JS 语法
console.log(`${file.name} 上传出错`, err, res);
},
},
uploadVideo: {
server: "你的地址",
// form-data fieldName ，默认值 'wangeditor-uploaded-video'
fieldName: "file",
// 单个文件的最大体积限制，默认为 10M
maxFileSize: 5 * 1024 * 1024, // 5M
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["video/*"],
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 超时时间，默认为 30 秒
timeout: 15 * 1000, // 15 秒
// 上传之前触发
onBeforeUpload(file) {
// TS 语法
// onBeforeUpload(file) { // JS 语法
// file 选中的文件，格式如 { key: file }
return file;
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress) {
// TS 语法
// onProgress(progress) { // JS 语法
// progress 是 0-100 的数字
console.log("progress", progress);
},
// 单个文件上传成功之后
onSuccess(file, res) {
// TS 语法
// onSuccess(file, res) { // JS 语法
console.log(`${file.name} 上传成功`, res);
},
// 单个文件上传失败
onFailed(file, res) {
// TS 语法
// onFailed(file, res) { // JS 语法
console.log(`${file.name} 上传失败`, res);
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
// TS 语法
// onError(file, err, res) { // JS 语法
console.log(`${file.name} 上传出错`, err, res);
},
// 自定义插入视频
customInsert(res, insertFn) {
// TS 语法
// customInsert(res, insertFn) { // JS 语法
// res 即服务端的返回结果
// 从 res 中找到 url poster ，然后插入视
insertFn(res.url);
},
},
},
},
mode: "default", // or 'simple'
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onChange(editor) {
// console.log("onChange", editor.children);
// console.log(999999, this.html);
},
onDestroyed(editor) {
console.log("onDestroyed", editor);
},
onMaxLength(editor) {
console.log("onMaxLength", editor);
},
onFocus(editor) {
console.log("onFocus", editor);
},
onBlur(editor) {
console.log("onBlur", editor);
console.log(44444, this.html);
},
customAlert(info, type) {
window.alert(`customAlert in Vue demo\n${type}:\n${info}`);
},
customPaste(editor, event, callback) {
console.log("ClipboardEvent 粘贴事件对象", event);
// const html = event.clipboardData.getData("text/html"); // 获取粘贴的 html
// const text = event.clipboardData.getData("text/plain"); // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData("text/rtf"); // 获取 rtf 数据（如从 word wsp 复制粘贴）
// 自定义插入内容
// editor.insertText("xxx");
// 返回 false ，阻止默认粘贴行为
// event.preventDefault();
// callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）
// 返回 true ，继续默认的粘贴行为
callback(true);
},
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器
},
});
</script>
<style lang="scss" scoped>
.box {
margin: 20px;
}
.boxs {
// width: 50%;
border: 1px solid #ccc;
}
</style>
<!--
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save
npm install xxxx --legacy-peer-deps命令与其说是告诉npm要去干什么，不如说是告诉npm不要去干什么。
legacy的意思：遗产/（软件或硬件）已过时但因使用范围广而难以替代的；而npm install xxxx --legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装；它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题，以npm v3-v6的方式去继续执行安装操作。
-->