html部分
<div class="editorBox">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 175px; width: 100%; overflow-y: hidden"
:mode="mode"
v-model="value"
:defaultConfig="editorConfig"
@onCreated="onCreated" @customPaste="customPaste"
>
</Editor>
</div>
js部分:先安装,然后引入
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
//记得定义组件
components: { Editor, Toolbar },
初始化富文本编辑器
const onCreated = (editor) => {
// console.log(editor.getAllMenuKeys());
data.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
};
配置值
editor: null,
toolbarConfig: {//工具栏配置
toolbarKeys: [
"bold",//加粗
"italic",//倾斜
"underline",//下划线
"bulletedList",//无序列表
"numberedList",//有序列表
"insertLink",//插入链接
],
},
editorConfig: {//编辑区域
placeholder: "请输入内容...",
hoverbarKeys: false,
},
mode: "simple", // or 'simple'
复制粘贴文本自定义
const customPaste=(editor, event) => { //对复制过来的内容进行处理,处理文字格式,图片等
// 获取粘贴的html部分
let html = event.clipboardData.getData("text/html");
// 获取rtf数据(从word、wps复制粘贴时有),复制粘贴过程中图片的数据就保存在rtf中
const rtf = event.clipboardData.getData("text/rtf");
if (html && rtf) {
// 列表缩进会超出边框,直接过滤掉
html = html.replace(/text\-indent:\-(.*?)pt/gi, "");
// 从html内容中查找粘贴内容中是否有图片元素,并返回img标签的属性src值的集合
const imgSrcs = findAllImgSrcsFromHtml(html);
if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
// 从rtf内容中查找图片数据
const rtfImageData = extractImageDataFromRtf(rtf);
if (rtfImageData.length) {
// 执行替换:将html内容中的img标签的src替换成ref中的图片数据,如果上面上传了则为图片路径
html = replaceImagesFileSourceWithInlineRepresentation(
html,
imgSrcs,
rtfImageData
);
editor.dangerouslyInsertHtml(html);
}
}
// 阻止默认的粘贴行为
event.preventDefault();
return false;
} else {
return true;
}
}
//仅仅粘贴文本
const customPaste = (editor, event) => {
//对复制过来的内容进行处理,处理文字格式,图片等
// 获取粘贴的html部分
let html = event.clipboardData.getData("text/html");
// 获取rtf数据(从word、wps复制粘贴时有),复制粘贴过程中图片的数据就保存在rtf中
const rtf = event.clipboardData.getData("text/rtf");
const text = event.clipboardData.getData("text/plain"); // 获取粘贴的纯文本
console.log(text);
editor.dangerouslyInsertHtml(text);
// 阻止默认的粘贴行为
event.preventDefault();
};