前言

在很多后台管理系统中，会要求引入富文本编辑器，那么现有的web端的富文本编辑器有哪些呢？
先感谢富文本编辑器的各大开发者！！！！至少不用自己写组件了。
我整理了一些，如果有小伙伴用到比较好用的，兼容性比较强的可以评论告诉我一下，我现在用的wangEditor，谷歌上面明显会有问题，也可能是谷歌浏览器的输入组件有问题哈。

一、TinyMCE

• 官网/demo （Demo 在官网首页可直接体验）
• 使用方法：
  1. 引入 CDN 或 npm 安装；
  2. 初始化时配置选择器和选项：

     tinymce.init({
       selector: '#mytextarea', // 绑定textarea元素
       plugins: 'advlist autolink lists link image', // 启用插件
       toolbar: 'undo redo | bold italic | alignleft' // 自定义工具栏
     });
     

• 浏览器兼容：支持 Chrome、Firefox、Safari、Edge，IE 11 需使用旧版本（5.x）。
• 自定义属性：
  • 支持自定义工具栏（toolbar）、插件（plugins）、快捷键（setup 配置事件）；
  • 可自定义内容过滤规则（valid_elements、invalid_elements）；
  • 支持自定义按钮（通过 addButton 方法）和菜单（menu 配置）。

二、 CKEditor 5

• 官网/Demo（提供多种预设 Demo，如经典版、文档版）
• 使用方法：
  1. npm 安装或引入 CDN；
  2. 初始化编辑器实例：

     import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
     ClassicEditor
       .create(document.querySelector('#editor'), {
         toolbar: ['heading', '|', 'bold', 'italic', 'link']
       })
       .then(editor => console.log(editor))
       .catch(err => console.error(err));
     

• 浏览器兼容：支持 Chrome、Firefox、Safari、Edge，不支持 IE（需用 CKEditor 4 兼容 IE）。
• 自定义属性：
  • 支持自定义插件（通过官方框架开发）、工具栏（toolbar 配置）；
  • 可自定义内容样式（styles 配置）和格式过滤（schema 定义允许的标签/属性）；
  • 支持自定义事件监听（如 change、save 事件）。

三、 Quill

• 官网/Demo（首页有交互式 Demo）
• 使用方法：
  1. 引入 CSS 和 JS；
  2. 初始化编辑器：

     const quill = new Quill('#editor', {
       theme: 'snow', // 内置主题
       modules: {
         toolbar: [['bold', 'italic'], ['link', 'image']] // 工具栏配置
       }
     });
     

• 浏览器兼容：支持 Chrome、Firefox、Safari、Edge，IE 11 需 polyfill 支持。
• 自定义属性：
  • 支持自定义模块（modules，如自定义上传、格式解析）；
  • 可自定义格式（Formats，如自定义标签、样式）；
  • 支持自定义主题（通过 CSS 覆盖）和事件（text-change、selection-change）。

四、 wangEditor（国产轻量编辑器）

• 官网/Demo（提供在线 Demo 和完整文档）
• 使用方法：
  1. npm 安装或引入 CDN；
  2. 初始化：

     import E from 'wangeditor';
     const editor = new E('#editor');
     editor.config.menus = ['bold', 'italic', 'link', 'image']; // 自定义菜单
     editor.create(); // 创建编辑器
     

• 浏览器兼容：支持 Chrome、Firefox、Safari、Edge 部分功能兼容。 （已最新通知为准）
  
• 自定义属性：
  • 支持自定义菜单（menus 配置）、上传图片/视频接口（uploadImgServer）；
  • 可自定义内容过滤规则（onchange 事件中处理）；
  • 支持自定义按钮（通过 menu.extend 方法）。
• 我遇到的问题：（Chrome 浏览器里的）
  • Chrome 浏览器光标乱动（输入和删除文本）；
  • 复制粘贴文本到 Chrome 浏览器，文本编译成其它字符（这个应该是Chrome 浏览器 汉字编码的问题，因为其它的产品的输入框也出现了这样的问题）；
  • Chrome 浏览器：粘贴文本时，格式失效（颜色、字体大小、换行符）

五、 ProseMirror

• 官网/Demo（示例展示核心功能）
• 特点：底层编辑器框架，灵活性极高，适合复杂场景（如协作编辑），需自行组装功能。
• 使用方法：需通过模块化方式引入核心包和插件，配置文档结构和编辑器实例（较复杂，适合有开发能力的团队）。
• 浏览器兼容：支持现代浏览器，IE 需 11+ 并配合 polyfill。
• 自定义属性：几乎所有功能均可自定义，包括文档模型（schema）、插件（plugins）、命令（commands）、视图渲染等。

六、md-editor-v3

md-editor-v3是一款基于Vue 3的Markdown编辑器组件，采用JSX和TypeScript开发，具有功能丰富、易于定制等特点。以下是其详细介绍：

• 官网/Demo：文档与在线预览地址为https://imzbf.github.io/md-editor-v3/docs/index，在线尝试示例地址为https://imzbf.github.io/md-editor-v3/playground。
• 使用方法：
  • 安装：可通过yarn或npm进行安装，命令分别为yarn add md-editor-v3和npm install md-editor-v3。
  • 编辑器模式：基本使用方式是通过v-model进行双向数据绑定，代码示例如下：

<template>
  <MdEditor v-model="text" />
</template>
<script setup>
import { ref } from 'vue';
import { MdEditor } from'md-editor-v3';
import'md-editor-v3/lib/style.css';
const text = ref('# Hello Editor');
</script>

- **仅预览模式**：可使用`MdPreview`组件，示例代码如下：

<template>
  <MdPreview :editorId="id" :modelValue="text" />
  <MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>
<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from'md-editor-v3';
import'md-editor-v3/lib/preview.css';
const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

• 浏览器兼容：md-editor-v3作为一款现代前端组件，通常支持现代主流浏览器，如Chrome、Firefox、Safari、Edge等，但对于IE浏览器可能缺乏良好的支持。
• 自定义属性：
  • 主题定制：支持自定义主题，内置了default、vuepress、github、cyanosis、mk - cute、smart - blue6种预览主题，也可自行扩展。同时，还支持暗黑主题和白色主题的绑定切换。
  • 工具栏定制：支持自定义工具栏顺序或显示，可通过toolbarsExclude属性选择不需要展示的工具栏，也可自定义扩展工具栏，支持点击类型、下拉菜单类型及弹窗类型等。
  • 其他自定义：支持使用prettier格式化内容，可在代码内设置关闭；支持mermaid绘图（>=1.8.0）和katex数学公式（>=1.9.0）；还可通过config方法修改编辑器的默认行为，如控制HTML标签的解析等。

总结

以下是对几款富文本编辑器的对比总结：

编辑器名称	主要特点	技术框架	兼容性	自定义能力
TinyMCE	流行的富文本编辑器，支持各种文本样式、多媒体插入、代码高亮等，有强大的插件体系，还具备实时协作功能。	JavaScript，可与React、Angular、Vue.js等框架集成。	主流浏览器。	高度可定制，可自定义工具栏配置，通过丰富的插件实现功能扩展。
CKEditor 5	提供广泛的自定义选项，有协作文档编辑器、协作文章编辑器、功能丰富的编辑器等多种类型，支持实时协作。	JavaScript。	主流浏览器。	可通过CKEditor 5 Builder方便地选择功能来定制编辑器，选择不同的插件来满足特定需求。
Quill	功能强大，开源免费，有简单易用的API，支持丰富的文本格式、嵌入式媒体，模块化设计易于扩展。	无特定框架依赖，可通过第三方包与React等框架集成。	主流浏览器。	可自定义工具栏、主题、格式化选项，通过其API和模块化架构能进行深度定制。
wangEditor	轻量级开源富文本编辑器，界面简洁，支持HTML源码编辑、Markdown编辑、图片上传等，还可通过插件扩展公式编辑、手写板等功能。	JavaScript。	主流浏览器，具有良好的跨浏览器兼容性和移动端适配性。	可根据实际需要快速配置编辑器，通过扩展插件实现功能增强。
ProseMirror	是一个强大的富文本编辑框架，灵活性高，提供了底层的编辑功能和数据模型，可基于此构建高度定制化的编辑器。	JavaScript，常与React等框架结合使用。	主流浏览器。	高度可定制，开发者可以根据需求自由构建编辑器的功能和界面，例如自定义文本格式、插件等。
md-editor-v3	基于Vue 3的Markdown编辑器，采用JSX和TypeScript开发，支持实时预览、图片上传等功能。	Vue 3。	现代浏览器，IE浏览器可能支持不佳。	可自定义工具栏、主题，支持通过配置修改编辑器的默认行为，如控制HTML标签的解析等。