乐趣区

关于前端:灵活可扩展2023年值得尝试的13款富文本编辑器

jiezi

作为前端开发人员，咱们常常须要为网站和应用程序增加文本内容。与传统的文本编辑器不同，富文本编辑器可让您轻松创立各种类型的文本内容，包含加粗字体、斜体字、框架、列表、图片和视频等。

本文我将向大家举荐 13 款开源的灵便可拓展的富文本编辑器，这些编辑器领有各自独特的个性和扩大，能够帮忙你创立丰盛的文本内容。

1.Quill（35.1k Star）

主页地址：https://quilljs.com/
仓库地址：https://github.com/quilljs/quill

Quill.js 是一款基于 JavaScript 的现代化富文本编辑器，它在界面、易用性、扩展性和性能方面都有着杰出的体现。相比传统的文本输入框，Quill.js 的富文本编辑器提供了 更加直观 、 天然 的交互方式和 更加丰盛的文本内容展现性能。

Quill.js 有以下特点：

  1. 易用性强：可视化编辑、主动保留等个性，不便实现文本款式、布局等。
  2. 可定制性强：反对自定义扩大，增加自定义块类型、工具栏等，更加灵便实用。
  3. 反对格式化和款式：提供多种根本格局和款式，好看易读。
  4. 自适应布局：采纳齐全响应式布局，适应不同浏览器和设施，进步挪动端应用体验。
  5. 多语言反对：提供多语言 UI 反对，用户可自定义语言和快捷键。

2.Slate.js（26.8k Star）

主页地址：https://www.slatejs.org/examples
仓库地址：https://github.com/ianstormtaylor/slate

Slate.js 是一款 反对齐全自定义 的富文本编辑器，它在可扩展性、可定制性、丰盛的 API 和 React 集成方面有着杰出的体现。

Slate.js 的次要指标是提供一种简略而又弱小的形式来构建富文本编辑器。

Slate.js 有以下特点：

  1. 组装灵便：可按需增加或组合插件，精简高效。
  2. 扩大定制：反对用户自定义插件和编辑器行为，提供丰盛的 API 和内置插件体系，疾速定制和扩大。
  3. 操作多样：反对文本插入、删除、选中、撤销、重做等基本操作，并提供全面的 API 领导。
  4. 长久保留：应用相似于 Git 的数据结构，反对版本控制和复原历史更改；反对本地存储，不便再次应用。

3.Editor.js（22.5k Star）

主页地址：https://editorjs.io/
仓库地址：https://github.com/codex-team/editor.js

Editor.js 是一款基于 JavaScript 的简略编辑器，通过 模块化 的形式提供了各种对于富文本内容编辑而言有用的外围性能。

Editor.js 领有易于应用的 拖放式 界面（实时预览），使得富媒体文档能够在几分钟内被创立并无需任何的前端常识。

Slate.js 有以下特点：

  1. 弱小的拓展性：提供多种定制化块和工具，灵便搭建文档编辑器工具，例如构建电商产品页面。
  2. 无编程教训可用：用户可轻松创立并生成可嵌入的代码。
  3. 宽泛适用性：可集成到多种 CMS 平台和网站构建器中。
  4. 丰盛的插件库：通过插件增加款式和性能，提供弱小的文本编辑器个性。
  5. 轻量化：只有 15 KB 大小。

4.Draft.js（22.4k Star）

主页地址：https://draftjs.org/
仓库地址：https://github.com/facebook/draft-js

Draft.js 是由 Facebook 开发的基于 React 的富文本编辑器框架。它应用可扩大的、可配置的、可组合的模块来治理文本内容的编辑。

Draft.js 是为编写合乎各种应用程序的富文本编辑器而提供更好的 模块化解决方案。

Draft.js 有以下特点：

  1. 弱小的扩展性：提供多种可组合的富文本编辑器组件和插件，容许用户定制行为和外观。
  2. 高度可定制：充沛的 API 反对款式、行为、校验等批改，满足特定需要。
  3. 实时合作：反对多用户同时编辑和实时合作场景。
  4. 易操作数据：应用易于操作和保护的 EditorState 数据模型进行文本内容和款式治理；基于 React，渲染速度更快交互成果更晦涩。
  5. 高安全性：蕴含强制安全检查，限度某些标记和危险属性的应用。

5.StackEdit（20.2k Star）

主页地址：https://stackedit.io/
仓库地址：https://github.com/benweet/stackedit

StackEdit 是一款基于 Web 的在线 Markdown 编辑器，使用者能够通过它轻松编辑 Markdown 文档、同时还能够间接将 Markdown 文档同步到一些云端存储服务如 Dropbox、Google Drive、GitHub 等，这是 StackEdit 的另一大特点。StackEdit 通过提供 实时预览模式，帮忙用户更好地浏览和编辑 Markdown 文档。

StackEdit 有以下特点：

  1. 反对云端同步：与多种云端存储服务同步集体数据。
  2. 多平台反对：可在 Web、Windows、macOS、Linux 等多个平台应用。
  3. 实时预览模式：即时预览 Markdown 编辑内容，进步编辑效率。
  4. 自定义主题和款式：提供多种主题和款式设置，满足不同用户需要。
  5. 插件反对：反对插件，自选所需性能，晋升应用成果。
  6. 易用性高：界面简洁明了，轻松创立、编辑和导出 Markdown 文件。

6.Tiptap（18.8k Star）

主页地址：https://tiptap.dev/
仓库地址：https://github.com/ueberdosis/tiptap

Tiptap 是一款基于 Vue 的富文本编辑器，它应用了 标注化 的 JSON 数据结构来治理文本内容和款式。Tiptap 的指标是为开发人员提供可扩展性、可定制性和易于集成的富文本编辑器解决方案。

Tiptap 有以下特点：

  1. 突出的扩展性：提供内置性能和插件，开发人员可编写本人的插件并公布到组件库中供别人应用。
  2. 丰盛的工具箱：提供命令、标记、过滤器、键绑定等工具，便于疾速构建功能强大的编辑器。
  3. 反对自定义主题：反对通过 CSS 自定义编辑器 UI 款式，满足不同用户需要。
  4. 简略易用：API 简略易用，反对晦涩的编辑体验并能解决简单富文本编辑场景。
  5. 基于 Vue：基于 Vue.js 开发，完满集成到 Vue.js 生态系统中，不便在 Vue 应用程序中应用。

7.GrapesJS（17.7k Star）

主页地址：https://grapesjs.com/
仓库地址：https://github.com/artf/grapesjs

GrapesJS 是一个弱小的基于 Web 的页面构建器，它让人们能够直观地通过 拖放形式 创立和编辑网页页面。它是一个开源的我的项目，反对支流浏览器，是一个用 JavaScript 和 CSS 开发的成熟的工具。

GrapesJS 提供了一个 可视化的编辑器 ，从而让用户不须要编写 HTML 或 CSS 代码，就能够同时 拜访各种设计工具和插件。

GrapesJS 有以下特点：

  1. 可视化编辑器：提供拖放网页元素、疾速解决款式等性能，不便用户疾速搭建网页界面。
  2. 非常灵活：自定义外观和性能，通过 API 和插件机制，可能集成到不同的环境中。
  3. 利用于残缺的工作流：反对文本、图像和视频制作，可用作残缺的 Web 内容管理系统 (CMS)，或轻量级的页面制作工具。
  4. 简略易用：应用简略易上手，无需编写 CSS 等代码，提供实时预览和撤销 / 重做等性能。

8.Trix（17.6k Star）

主页地址：https://trix-editor.org/
仓库地址：https://github.com/basecamp/trix

Trix Editor 是一个基于 Web 的富文本编辑器，由 Basecamp 公司开发。

Trix Editor 的定位是一款 易于集成和应用的编辑器，它非常容易应用，提供了富文本编辑器所需的基本功能，同时具备易于扩大和自定义的特点。

Trix 有以下特点：

  1. 易于集成：可与现有的 Web 应用程序轻松集成，并提供多个官网包供 Ruby on Rails、React、Vue 等框架应用。
  2. 根本功能齐全：提供罕用的基本功能，如色彩和字体款式、段落款式、链接、图像和视频插入等，还反对撤销和重做性能。
  3. 易于扩大和自定义：容许用户增加插件以扩大性能，通过 CSS 和自定义款式来定制编辑器的外观和格调。
  4. 安全性高：不容许用户应用自定义 HTML 标签或脚本，在此基础上进行文本编辑操作，进步了编辑器的安全性。
  5. 开源收费：是一款开源免费软件，不便宽泛采纳。

9.Toast UI Editor（15.9k Star）

主页地址：https://ui.toast.com/tui-editor/
仓库地址：https://github.com/nhn/tui.editor

Toast UI Editor 是一款利用 JavaScript 和 jQuery 开发的块编辑器。它反对多种文本字体和大小，还能够应用 Markdown 或 WYSIWYG（所见即所得）编辑模式。

Toast UI Editor 有以下特点：

  1. 反对 Markdown 编辑：可能应用 Markdown 语法进行文本编辑，用户能够间接输出 Markdown 语法来编辑文本内容。
  2. 实时预览性能：提供实时预览性能，用户能够在编辑器中同时查看编辑后文本的预览成果，以便更好的理解编辑成果。
  3. 丰盛的性能特点：具备字体、色彩、表格、我的项目符号列表、图像和视频插入、代码块和数学公式等性能，不便用户进行文本编辑和排版操作。
  4. 界面简洁：具备简洁的用户界面，用户能够轻松找到所需性能和工具栏，可通过自定义款式批改编辑器的外观和格调。
  5. 易于集成：可通过插件集成到 CMS、博客和论坛，也可嵌入式集成到基于 Web 框架的应用程序中。

10.Gutenberg（8.6k Star）

主页地址：https://wordpress.org/gutenberg/
仓库地址：https://github.com/WordPress/gutenberg

Gutenberg 编辑器是 WordPress 5.0 及以上版本中默认的编辑器，它是一款 基于块的编辑器 ，旨在提供 更直观 、 更丰盛 和更灵便 的编辑体验。

Gutenberg 有以下特点：

  1. 块编辑器：将文章和页面内容划分为独立块，用户可通过拖拽、复制、粘贴等形式，在不同类型块之间疾速编辑和挪动。
  2. 内容可视化：直观、敌对的内容可视化编辑性能，实时编辑和调整内容的款式、布局和排版。
  3. 可扩展性：具备丰盛的 API 和插件零碎，用户可依据须要进行自定义和扩大，满足不同需要。
  4. 多媒体反对：可轻松增加和治理各种类型的多媒体资源，包含图片、视频、音频等，不便融入文章和页面中。
  5. 兼容性：与支流浏览器和设施兼容性良好，实用于各种场景和设施的应用需要。

11.CKEditor 5（7.1k Star）

主页地址：https://ckeditor.com/ckeditor-5/
仓库地址：https://github.com/ckeditor/ckeditor5

CKEditor 5 是一款功能强大、现代化的 web 富文本编辑器，旨在提供 用户敌对 、 可扩大 和易于集成 的编辑体验。

CKEditor 5 有以下特点：

  1. 拆散组件：将编辑器拆分成多个独立的组件，提供灵便和可扩大的编辑性能，如富文本编辑器、敲击感应、实时输出、段落宰割等。
  2. 插件式架构：提供丰盛的插件零碎，用户可依据须要装置应用不同插件，如表情符号、语法高亮、代码块等。
  3. 自然语言解决：应用自然语言解决技术，实现智能化文本编辑性能，如主动拼写检查和语义化排版等。
  4. ** 区块模型：采纳区块模型形式组织和治理页面内容，用户可通过拖拽、复制和粘贴等形式，不便地编辑不同类型的块。
  5. 可定制性：齐全可定制，用户可轻松地依据须要对编辑器进行扩大和定制。
  6. 构建与集成：提供多种形式用以构建和集成编辑器，以满足不同用户需要。

12.ProseMirror（6.5k Star）

主页地址：https://prosemirror.net/
仓库地址：https://github.com/ProseMirror/prosemirror

ProseMirror 是一款基于 JavaScript 的富文本编辑器框架，提供了 高度灵活性 和可定制性。ProseMirror 具备块式构造、自定义插件、键盘导航、撤销和重做性能等。

ProseMirror 有以下特点：

  1. 基于文档模型：ProseMirror 以文档树为形象模型，提供富文本编辑器，不便对文档的操作和治理。
  2. 可扩展性：丰盛的 API 和插件零碎反对用户自定义和扩大，如块、模块、款式等，满足不同需要。
  3. 格局反对：ProseMirror 反对泛滥富文本格式，如 HTML、Markdown、LaTex 等，不便导入导出文档。
  4. 高可定制性：灵便定制各元素和组件，满足用户编辑需要，包含编辑能力和款式等。
  5. 可视化编辑：提供可视化编辑性能，用户能够实时预览文档款式和渲染成果，不便编辑和调整。

13.Sir Trevor JS（4.5k Star）

主页地址：http://madebymany.github.io/sir-trevor-js/
仓库地址：https://github.com/madebymany/sir-trevor-js

Sir Trevor JS 是一款基于块、轻松拖放 、插 件式架构 、简略易用、反对 多平台 和多浏览器、齐全可定制 的现代化富文本编辑器。

Sir Trevor JS 有以下特点：

  1. 基于块：将文档内容合成为块，如文本、图像、视频等，每个块均有自定义款式和行为。
  2. 轻松拖放：采纳拖曳组件形式，疾速构建文档构造。
  3. 插件式架构：提供多种插件，如代码块、图像块、工作块等。
  4. 简略易用：上手简略，几行代码即可集成到任何 web 应用程序中。
  5. 多平台和多浏览器反对：反对多平台浏览器，如 Mac、Windows、iOS、Android、Chrome、Firefox、Safari 等。
  6. 齐全可定制：具备齐全可定制的能力，用户能够灵便定义款式、性能。

总结

无论你是一位业余的开发人员，还是一个有趣味的学习者，这些开源编辑器将带给你有限的发明空间，同时能够轻松扩大和自定义，让你的工作更加高效和愉悦。抉择一款牢靠的富文本编辑器，是放弃集体和团队合作竞争力的首要步骤。

心愿这些开源富文本编辑器可能满足你的各种需要和要求，为你带来无穷的创意和灵感。

退出移动版