wangEditor 这玩意儿是开源的 Web 富文本编辑器，用起来那叫一个方便，配置简单得很😃。不光好上手，功能还特强👍。
它能够快速接入，只需几行代码即可生成，并且集成了所有常见功能，无需二次开发，在 Vue、React 等框架中也可以迅速接入。wangEditor 还提供了官方的 Vue、React 组件。
使用简单
下面是在 Vue 中使用 @wangeditor/editor 的基础步骤示例：
1. 下载依赖
npm i @wangeditor/editor @wangeditor/editor-for-vue
2. 引入 CSS 和内置组件
<template> <div style="border:1px solid #ccc"> <!-- 引入 CSS --> <link rel="stylesheet" href="@wangeditor/editor/dist/css/style.css" /> <!-- 引入组件 --> <toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /> </div> </template> <script setup> import { editor, toolbar } from '@wangeditor/editor-for-vue'; import { shallowRef, ref } from 'vue'; // 编辑器实例，必须用 shallowRef const editorRef = shallowRef(); // 内容 html const valueHtml = ref('<p>hello</p>'); // 工具栏配置 const toolbarConfig = { toolBarKeys: () => [ // 一些常用的菜单 key 'bold', // 加粗 'italic', // 斜体 'through', // 删除线 'underline', // 下划线 'bulletedList', // 无序列表 'numberedList', // 有序列表 'color', // 文字颜色 'insertLink', // 插入链接 'fontSize', // 字体大小 'lineHeight', // 行高 'uploadImage', // 上传图片 'uploadVideo', // 上传视频 'delIndent', // 缩进 'indent', // 增进 'deleteImage', // 删除图片 'divider', // 分割线 'insertTable', // 插入表格 'justifyCenter', // 居中对齐 'justifyJustify', // 两端对齐 'justifyLeft', // 左对齐 'justifyRight', // 右对齐 'undo', // 撤销 'edo', // 重做 'clearStyle', // 清除格式 'fullScreen' // 全屏 ], }; // 编辑器配置 const editorConfig = { placeholder: '请输入内容...', menu_conf: {}, }; // 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) return; editor.destroy(); }); // 组件创建时 const handleCreated = (editor) => { editorRef.value = editor; // 记录 editor 实例，重要！ }; </script>
3. 自定义工具栏菜单的展示
如果想要自定义工具栏菜单的顺序、分组、添加或删除等，只需修改工具栏配置对象的toolBarKeys属性。该属性值是一个数组，内部填写菜单的 key，使用官方 API 接口editor.getAllMenuKeys()可查询全部内置菜单的 key。
4. 自定义工具栏内置菜单的功能
比如自定义上传图片、上传视频等功能，只需修改编辑器配置对象的menu_conf属性。不同的功能对应着不同的menu_conf属性值，具体可参考官方文档。
5. 兼容性
它兼容主流的 PC 浏览器，如 Chrome、Firefox、Safari、Edge 等，但暂不支持移动端编辑（支持移动端查看），也不再支持 IE 浏览器。
6. 其他特性
wangEditor 开源多年，有大量用户使用和反馈，开发者已经解决了众多用户问题（详见 github issues）。
总结
总之，@wangeditor/editor 是一款非常实用的 Web 富文本编辑器，它的简单易用、功能强大以及良好的兼容性，使其在众多项目中都能发挥出色的作用👏。
如果你正在寻找一款优秀的富文本编辑器，不妨试试它吧！😜
