更详细配置请前往官网：https://www.wangeditor.com/
目录
介绍1. 什么是 WangEditor？主要特点：
2. 安装3. 使用示例3.1 基本使用3.2 JS
4. 自定义配置菜单5. 排除掉某些菜单组6. 总结
介绍
在现代 Web 开发中，富文本编辑器是一个常见的工具，它允许用户输入、编辑和格式化内容。在众多富文本编辑器中，WangEditor 是一个轻量级、高效且易于使用的选择。它支持 HTML 格式的内容编辑，拥有直观的用户界面，广泛应用于博客平台、社交平台、内容管理系统等领域。
本文将详细介绍 WangEditor 的功能、使用方式、定制和扩展能力，帮助你了解如何高效地将其集成到你的项目中。
1. 什么是 WangEditor？
WangEditor 是一个基于 JavaScript 的富文本编辑器，它具有简单、清晰、易上手的特点。与其他重量级编辑器（如 CKEditor、TinyMCE）相比，WangEditor 具有更轻量的体积和更简洁的 API，适合用作 Web 开发中的富文本输入组件。
主要特点：
轻量级：WangEditor 的核心功能体积小，适合嵌入到各种 Web 应用中。易于集成：支持直接引入 CDN 或通过 NPM 安装，并且配置简单，易于上手。自定义扩展：支持插件机制，可以根据需求扩展各种功能。跨平台支持：支持主流浏览器，并兼容 PC 和移动端。丰富的功能：提供了常见的富文本编辑功能，如文本格式化、插入图片、视频、表情等。
2. 安装
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
3. 使用示例
3.1 基本使用
通过以下简单的代码创建一个基本的富文本编辑器：
style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" /> style="height: 500px; overflow-y: hidden" v-model="questionFormData.content" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
这段代码将会在页面上创建一个默认的编辑器，你可以直接在这个编辑区域进行文本输入、格式化以及插入图片、视频等。
3.2 JS
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import type { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
const editorRef = shallowRef();
const toolbarConfig: Partial
// toolbar 配置
};
const editorConfig: Partial
placeholder: "请输入...",
MENU_CONF: {},
};
const handleCreated = (editor) => {
editorRef.value = editor;
};
4. 自定义配置菜单
const editorConfig: Partial
placeholder: "请输入...",
MENU_CONF: {
//文字颜色
color: {
colors: ["#000", "#333", "#666"],
},
//背景颜色
bgColor: {
colors: ["#000", "#333", "#666"],
},
//字号
//行高
//表情
//.....前往官网查看更多
},
};
5. 排除掉某些菜单组
排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。 可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置
// 排除富文本的菜单项
const toolbarConfig: Partial
// toolbar 配置
excludeKeys: [
"headerSelect",
"blockquote",
"bold",
"underline",
"italic",
"group-more-style", // 排除菜单组，写菜单组 key 的值即可
"color",
"bgColor",
"fontSize",
],
};
6. 总结
WangEditor 是一个高效、轻量、易用的富文本编辑器，非常适合用于现代 Web 开发中。它不仅支持基础的文本编辑功能，还提供了丰富的配置和插件扩展机制，能够满足大部分开发需求。无论你是在开发博客平台、内容管理系统，还是在线富文本编辑器，WangEditor 都是一个值得考虑的优秀选择。
希望本文能够帮助你深入理解 WangEditor，快速将其集成到你的项目中，实现更好的用户体验。