当前位置：首页 > news >正文

WangEditor — 一个轻量级富文本编辑器

news 来源：原创 2025/5/11 1:20:45

官网：https://www.wangeditor.com/

介绍

在现代 Web 开发中，富文本编辑器是一个常见的工具，它允许用户输入、编辑和格式化内容。在众多富文本编辑器中，WangEditor 是一个轻量级、高效且易于使用的选择。它支持 HTML 格式的内容编辑，拥有直观的用户界面，广泛应用于博客平台、社交平台、内容管理系统等领域。

本文将详细介绍 WangEditor 的功能、使用方式、定制和扩展能力，帮助你了解如何高效地将其集成到你的项目中。

1. 什么是 WangEditor？

WangEditor 是一个基于 JavaScript 的富文本编辑器，它具有简单、清晰、易上手的特点。与其他重量级编辑器（如 CKEditor、TinyMCE）相比，WangEditor 具有更轻量的体积和更简洁的 API，适合用作 Web 开发中的富文本输入组件。

主要特点：

轻量级：WangEditor 的核心功能体积小，适合嵌入到各种 Web 应用中。
易于集成：支持直接引入 CDN 或通过 NPM 安装，并且配置简单，易于上手。
自定义扩展：支持插件机制，可以根据需求扩展各种功能。
跨平台支持：支持主流浏览器，并兼容 PC 和移动端。
丰富的功能：提供了常见的富文本编辑功能，如文本格式化、插入图片、视频、表情等。

2. 安装与集成

WangEditor 支持多种安装方式，最常见的是通过 NPM 和 CDN 方式进行集成。

2.1 通过 NPM 安装

npm install wangeditor

然后在 JavaScript 文件中导入：

import E from 'wangeditor'

2.2 通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

3. 使用示例

3.1 基本使用

一旦集成成功，你就可以通过以下简单的代码创建一个基本的富文本编辑器：

<div id="editor-container"></div>
<script>const editor = new E('#editor-container');editor.create();
</script>

这段代码将会在页面上创建一个默认的编辑器，你可以直接在这个编辑区域进行文本输入、格式化以及插入图片、视频等。

3.2 配置选项

WangEditor 提供了多种配置选项，可以根据需求对编辑器进行定制。常见的配置项有：

menus：设置可用的工具栏按钮，如加粗、斜体、插入图片等。
placeholder：设置输入框的占位符。
height：设置编辑器的高度。
uploadImgMaxSize：限制上传图片的最大尺寸。

例如，设置一个带有图片上传功能的编辑器：

<div id="editor-container"></div>
<script>const editor = new E('#editor-container');// 配置上传图片功能editor.config.uploadImgShowBase64 = true;  // 使用 base64 显示图片editor.config.menus = ['bold', 'italic', 'underline', 'fontSize', 'head', 'align', 'list', 'link', 'image'];editor.create();
</script>

3.3 图片上传

WangEditor 提供了图片上传的功能，可以通过配置自定义上传接口进行图片的上传处理。

editor.config.uploadImgServer = '/your/upload/image/api';  // 设置图片上传接口
editor.config.uploadImgMaxSize = 3 * 1024 * 1024;  // 限制图片大小
editor.config.uploadImgTimeout = 5000;  // 设置上传超时

如果不想使用服务器上传，可以选择将图片转换为 Base64 格式。

editor.config.uploadImgShowBase64 = true;

4. 自定义功能与插件扩展

WangEditor 支持通过插件机制来扩展功能。你可以自定义工具栏按钮、事件或功能模块，满足更复杂的应用需求。

4.1 自定义按钮

你可以通过 editor.config.menus 配置自定义按钮。

例如，添加一个自定义的按钮：

editor.config.menus = ['bold', 'italic', 'underline', 'image', 'myCustomButton'
];// 添加自定义按钮
editor.config.customMenus = [{key: 'myCustomButton',title: 'My Custom Button',icon: '<i class="fa fa-star"></i>',action: function() {alert('My custom button clicked!');}}
];

4.2 自定义插入模块

WangEditor 允许用户通过 editor.cmd 对文档进行插入操作。例如，插入一个表情符号模块。

editor.cmd.do('insertHTML', '<img src="path_to_emoji.png" />');

4.3 插件机制

WangEditor 还提供了插件机制，可以很方便地加载第三方插件。

import { customPlugin } from 'custom-plugin';
editor.config.customPlugin = customPlugin;
editor.create();

5. 常见问题与解决方案

5.1 编辑器内容丢失

如果你的页面使用了动态数据填充编辑器内容，确保使用 editor.txt.html() 方法获取或设置内容：

// 获取编辑器内容
const htmlContent = editor.txt.html();// 设置编辑器内容
editor.txt.html('<p>新的内容</p>');

5.2 上传图片失败

上传图片失败可能是由于跨域问题或接口设置错误。确保你的图片上传接口支持跨域请求，并且正确设置了 Access-Control-Allow-Origin 头。

5.3 自定义功能不生效

如果你添加了自定义功能（如自定义按钮或菜单），但它们没有显示或没有响应，检查以下几点：

确保 menus 配置项中包含你的自定义按钮。
确保在 create() 方法之前正确配置编辑器。

6. 总结

WangEditor 是一个高效、轻量、易用的富文本编辑器，非常适合用于现代 Web 开发中。它不仅支持基础的文本编辑功能，还提供了丰富的配置和插件扩展机制，能够满足大部分开发需求。无论你是在开发博客平台、内容管理系统，还是在线富文本编辑器，WangEditor 都是一个值得考虑的优秀选择。

希望本文能够帮助你深入理解 WangEditor，快速将其集成到你的项目中，实现更好的用户体验。

介绍