一、富文本编辑器 wangEditor
1、富文本概述
-
富文本（Rich Text）是一种包含丰富格式和样式的文本
-
富文本不仅限于纯文字，还可以包含字体、颜色、大小、图片、链接、表格等多种元素
-
与纯文本（Plain Text）相比，富文本提供了更丰富的视觉和功能表现
-
富文本的常见应用场景有：网页内容编辑、办公软件、内容管理系统
2、wangEditor 概述
-
wangEditor 是一款开源富文本编辑器
https://www.wangeditor.com/ -
wangEditor 专注于轻量、简洁、易用，它适用于各种 Web 应用
-
wangEditor 支持常见富文本编辑功能，例如，加粗、斜体、下划线、插入图片、链接、表格等
二、wangEditor 初体验案例
- 安装 wangEditor
npm install wangeditor
- 使用 wangEditor
<template>
<div>
<div ref="editorContainer" class="editor_container"></div>
<button @click="submitContent">提交内容</button>
</div>
</template>
<script>
import Editor from "wangeditor";
export default {
name: "WangEditorTest",
data() {
return {
editor: null,
};
},
mounted() {
// 初始化编辑器
this.editor = new Editor(this.$refs.editorContainer);
// 配置编辑器
this.editor.config.onchange = (html) => {
// 监听内容变化，这里可以处理编辑器内容的变化
console.log(html);
};
// 创建编辑器
this.editor.create();
},
methods: {
submitContent() {
// 获取编辑器内容
const content = this.editor.txt.html();
console.log(content);
},
},
};
</script>
<style scoped>
.editor_container {
border: 1px solid #ccc;
width: 100%;
}
</style>
三、wangEditor 初体验案例解读
- 引入 wangEditor
import Editor from "wangeditor";
- 准备一个集成富文本编辑器的容器，其中，
ref="editorContainer"是一个 Vue 的引用，以便访问这个 DOM 元素
<div ref="editorContainer" class="editor_container"></div>
- 准备一个富文本编辑器实例
editor: null,
- 初始化一个富文本编辑器实例，并将其集成到通过 ref 引用的DOM元素上
// 初始化编辑器
this.editor = new Editor(this.$refs.editorContainer);
- 配置富文本编辑器的 onchange 事件，当编辑器内容发生变化时，这个回调函数会被调用，并接收编辑器内容的 HTML 字符串作为参数
// 配置编辑器
this.editor.config.onchange = (html) => {
// 监听内容变化，这里可以处理编辑器内容的变化
console.log(html);
};
- 创建富文本编辑器，渲染到页面上
// 创建编辑器
this.editor.create();
- 也可以通过富文本编辑器实例主动获取内容
// 获取编辑器内容
const content = this.editor.txt.html();
console.log(content);