主页 > 计算机互联网通信 > 网站编辑

网站编辑器（富文本编辑器）哪个好用？

求职招聘网 2023-09-11 23:02 编辑：admin 286阅读

一、网站编辑器（富文本编辑器）哪个好用？

可以试试这个

wangEditor - 轻量级web富文本编辑器

生成表格还是会有一些样式，不过比百度的要少一些。

以下是官方介绍：

  • 与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。
  • 与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。
  • 它还会根据使用者的反馈不断完善，未来将支持移动版。

二、文本编辑器和富文本编辑器区别？

文本即是纯文字，字母，符号，数字

富文本可以包含文本的全部内容，另外还支持图片，视频，音频，以及样式（包括字体，颜色，大小等等）等等。

三、移动端富文本编辑器推荐？？

0. UEditor 百度

优点：插件多，基本满足各种需求，类似贴吧中的回复界面。

缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。

已经成为历史

1. Kindeditor

界面类似百度，效果很像，支持自定义风格。

优点：文档齐全，使用还算方便。

缺点：总感觉样子不是很好看，没有现代那种风格，还是老式的传统图标。

http://kindeditor.net/demo.php

2. Simditor

Simditor 是一个基于浏览器的所见即所得富文本编辑器。

优点：样式简洁，插件不多，基本满足需求，github上面开源，维护较好。

缺点：因为文档看起来吃力，所以本人没有考虑继续使用。

http://simditor.tower.im/

3. bootstrap-wysiwyg

利用 Bootstrap 实现的，简洁大方好看，移动端兼容较好。

优点：轻量，好看，开源，使用方便。在Mac和Wndows平台上能够自动针对常用操作绑定标准热键，可以通过拖拽插入图片，支持图片上传（也可以获取移动设备上的照片），语音识别输入（仅限Chrome浏览器）。

缺点：需要一定的浏览器支持，毕竟需要bootstrap。

http://www.bootcss.com/p/bootstrap-wysiwyg/Try The Next Generation WYSIWYG HTML Editor Demo

4. WangEditor

js和css实现

优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。

插件基本能满足需求，本人推荐使用。

http://www.wangeditor.com/

5. CKEditor

功能强大，使用较多，可以看他们官网的例子，马上就有感觉。

优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。

缺点：网站访问速度一般，文档英文，需要花时间开发。

http://ckeditor.com/

6. Tinymce

支持图片在线处理，插件多，功能强

优点：编辑能力优秀，界面好看，支持手机端和移动端切换。

缺点：同样文档为英文，开发需要花时间。

https://www.tinymce.com/

四、JavaScript 中怎么实现富文本编辑器？

在JavaScript中实现富文本编辑器，一般可以通过以下几个步骤来完成：

  1. 创建一个包含富文本编辑器的HTML页面。在页面中添加一个可编辑的div元素，用于用户输入和编辑文本。
  2. 使用JavaScript获取该div元素，并将其转换为富文本编辑器。可以使用现成的编辑器库，如TinyMCE、CKEditor等，也可以自己编写编辑器的代码。
  3. 为编辑器添加格式化和样式功能。可以添加工具栏或按钮，使用户能够轻松地添加样式、格式化文本、插入图片、创建表格等。
  4. 实现保存和加载功能。可以将编辑器中的内容保存到服务器或本地存储中，以便下次打开时恢复编辑器中的内容。

下面是一个使用TinyMCE实现富文本编辑器的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'textarea',  // 将Textarea转换为富文本编辑器
      plugins: 'autoresize advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
      autoresize_min_height: 200,  // 自适应高度的最小值
      autoresize_max_height: 500,  // 自适应高度的最大值
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

在这个示例中，我们使用了TinyMCE库将一个Textarea元素转换为富文本编辑器，并为编辑器添加了格式化和样式功能。用户可以使用工具栏中的按钮轻松地设置文本样式、插入图片、创建表格等。同时，我们还使用了autoresize插件，使编辑器的高度能够自适应内容。最后，用户编辑的内容可以使用JavaScript代码将其保存到服务器或本地存储中。

五、vue下有哪些好用的富文本编辑器？

Tiptap —— The headless editor framework for web artisans.

什么是 Tiptap

在介绍 Tiptap 前，首先要介绍一下 ProseMirror，它是一款可定制性及极强的「所见即所得」富文本编辑器框架，文档的可编辑性基于 contentEditable 属性，支持协同，作者是 @marijnh，他也是 CodeMirror 编辑器的开发者。

国外一些比较著名的大厂如 「Atlassian」 和 「纽约时报」 都在使用 ProseMirror。但它本身并不像其他编辑器一样开箱即用，需要一系列的模块进行配合搭建，而且涉及到一些内部抽象概念，API 复杂且多，官方文档全英文，所以上手成本比较高。 而 Tiptap 则是对 ProseMirror 的 「headerless」 包装，将必要的一些模块组装、MVVM 框架接入等部分黑盒在了框架内部，在不丧失其原有可定制扩展性的同时，暴露一些更简单更少的 API ，让开发者更容易上手。

什么是 headerless

Tiptap 是一款无头编辑器，它没有提供任何 UI 样式，你完全可以自由地构建任何你想要的 UI。不需要重写任何 class，不需要 !important 或其他 hack 代码。

Tiptap 的前世今生

Tiptap 在 2019 年被 [@Philipp Kühn](https://github.com/philippkuehn) 创建，当时他在找一个 Vue2.js 的编辑器，但是找了很久都没有一个真正解决他需求的方案，当时 React 已经有了模块化支持不错的 Slate.js。这时他偶然发现了很多国外大厂都在使用的 ProseMirror，于是决定自己撸起袖子上，在它的基础上自建一个支持 Vue，易于扩展，且不依赖 jQuery 这类过时插件的编辑器轮子，Tiptap 应运而生。

到目前为止，Tiptap 经历了两个版本 v1 和 v2。

Tiptap1

Tiptap 诞生当初，因为其开箱即用，支持 Vue2，拥有丰富 API 的同时原本的 API 一个也没丢，不丧失原本的定制化能力，比 ProseMirror 香太多。在 Github 上短短几个月便收获了大量开发者不错的反馈，但同时也有一些缺点暴露出来：

  • 「只支持 vue2，不支持 vue3」
  • 「没有提供 TypeScript 类型定义」，在 TS 项目中开发体验会很差，可能因为 Vue2 本身也对 TS 不友好
  • 虽然提供了许多开箱即用的扩展，但是它们的功能都相对简单，比如图片只能插入，不能修改尺寸和对齐，要用在真正的场景中，还需要做一定的开发，「没有真正的开箱即用」
  • 「某些扩展存在 bug」
  • 「文档不太完善」，很多属性需要深入源码

于是，作者在 19 年底有了 Tiptap2 的计划，[issue 链接](https://github.com/ueberdosis/Tiptap/issues/547)

Tiptap2

终于，经过一年的时间，Tiptap2 在今年亮相了，更改了大量 v1 版的 API，几乎都是 「breaking change」，想从 v1 迁移到 v2 可能需要多花点功夫。

相比之前，有了更多亮眼的特性：

  • 「支持 Vue2，Vue3，React，Svelte 等框架」
  • 「使用 TypeScript 重构」，支持类型系统
  • 代码「多包发布」，每个模块的功能更加独立，开发者能更好的按需使用
  • 提供了更多「开箱即用的扩展」
  • 完善了文档细节，有了「文档站点」
  • 更高程度的支持了「协同编辑」

Tiptap2 目前在 beta 版本，但总体已经相对比较稳定。

为什么推荐使用 Tiptap

ProseMirror 是一个可靠且功能强大的编辑器。但是它并不是大多数人想要的那种开箱即用。但是使用 Tiptap，你只需要几分钟就能上手，而且也提供了大量的扩展供你选择和参考，同时在你需要的时候，「仍然可以使用原生的 ProseMirror API」。

我自己也是个 ProseMirror 和 Tiptap 的深度使用者

目前，Tiptap 可能是社区中唯一一个支持 Vue2 和 3，能够自己写插件扩展，又支持协同的编辑器了。

最后

如果你正在尝试寻找开发编辑器的方案，有机会可以尝试下 ProseMirror。

如果你有意愿或正在使用 ProseMirror 进行开发，推荐使用 Tiptap。

今后我会继续分享一些自己使用 Tiptap 开发 ProseMirror 的相关实践。

❤️支持

如果本文对你有帮助，点赞 支持下我吧，你的「赞」是我创作的动力。

欢迎关注公众号「小李的前端小屋」，我目前在一线大厂拼搏中，会不定期对前端的工作思考与心得进行深度分享和总结，助你成为更好的前端。

六、android开发和ios开发富文本编辑器？

wasabeef/richeditor-android 简书用的这个

七、前端 富文本编辑器 哪个功能较完善？

看题主问题里提到了 Textbus，作为作者，我就 Textbus 来做一下简单的介绍吧。

Textbus 是我前几年从业余开始做的一个开源项目，经历了从 contenteditable 到完全自定义光标、自实现虚拟 DOM 、高性能渲染器、抽象选区和完全创新的组件化系统，基本涵盖了富文本开发的方方面面。

如今，我个人也因此踏入文档开发的行业，算半个业内人士了，对于刚了解这一类产品的新人来说，首先需要了解，现今市面上富文本编辑器本身的性质。总体来说，可分为两类。

  • 产品类这类编辑器主打开箱即用，但定制能力稍差，这也是大家见到最多的。如 wangEditor、UEditor、tiptap、TinyECE 等等，这并不是说这类编辑器不能定制，而是这类编辑器内置了太多东西，不能完全提供一个空箱子，让你去往里填东西。
  • 框架类这类编辑器主打底层驱动，可能官方会有一个现成的 demo，但只有少部分功能，很多东西需要你自己去开发。如 ProseMirror、Slatejs、Draftjs、Quill 等，当然，也包括 Textbus。使用这类编辑器，需要使用都对富文本有一定的了解，然后基于此基座，并投入时间开发自己需要的功能。

了解了上面的分类，你应该可以根据自己的实际情况来选择产品了。产品类的比较好选择，毕竟都看得见摸得着，框架类的话，对于新人来说，就有点难了。下面说说 Textbus 的优缺点。

优点：

  1. 根据富文本的特点而专门开发的组件化系统，让富文本编辑支持复杂布局，插入特殊控件等就像现代前端框架一样，非常的简单。
  2. 完全可控的数据。由于 Textbus 采用完全的数据驱动，输入输出完全依赖内核来完成，在不同的浏览器上，不会存在不一样的行为和结果。
  3. hooks 风格的扩展代码，让你在不同上下文中对同样事件定制不同的行为变得异常简单。
  4. 高度灵活的语法糖支持，你可以非常灵活的定制输入实时转换功能，如 Markdown 中的 # 号 + 空格变为标题等，你也可以完全自创语法，只要你开心。
  5. 完全可定制的文档解析能力，可以让你最大可能的保持从网页、word 等其它页面复制过来的内容和格式。
  6. 既可以做到组件深层次嵌套，也可以做到像现在大多数编辑器一样 block 化。
  7. 内置功能强大的格式转换能力，这也是富文本的难点之一，尤其是对于支持树状数据结构的编辑器来说，要实现这一点非常复杂。
  8. 高性能的渲染器和 jsx/tsx 支持，高性能意味着打开超长文档、超大文档不容易卡顿，jsx 的支持意味着编写复杂布局和复杂交互的组件更容易。
  9. 支持在线协作，Textbus 官方目前提供了基于 Yjs 的协作能力支持，你也可以采用其它的协作方案来对接 Textbus 的数据模型。
  10. 完全抽象的选区系统，你不需要再关心浏览器复杂的选区问题。
  11. 作者自己的工作就是基于 Textbus 开发类似钉钉文档、石墨文档类的产品，目前基本没有遇到任何设计上不足或性能上的问题，有问题也会及时修复。

不足：

  1. 不开启实验性输入特效的情况下，不能在文档中实时展示合成输入的中间状态字符。如输入“你好”，用拼音输入法的话，会先在文档中输入 "nihao" 的拼音，在敲击空格之后，才会把你好输入到内容中。开启实验性输入效果输入时，这个问题会得到解决，但由于 “nihao” 的输入会影响数据模型，会导致协作模式下不能很好的解决脏数据的问题，我正在为此构思解决方案。
  2. 还不能很好的兼容 emoji 字符，目前已处理了长度为 2 的 emoji 字符，但实际的情况还有更多，如用两个甚至更多 unicode 并成一个字符，这时，Textbus 并不能很好的处理这种情况，当然，市面上的大多数编辑器也没处理好，包括浏览器本身。
  3. 一定的上手成本，这个也不能说是不足，只不过按照 0 成本的原则，你使用 Textbus 总是要花时间来了解和学习，所以凑一个数
  4. 其它的我想到再说吧。

写在最后，当然，我还是非常推荐题主来尝试使用 Textbus，尤其是 Textbus 的组件，是其它富文本中没有的，相信 Textbus 一定能给你带来帮助。

Textbus 富文本编辑器Github

以下为2022 年 12 月 9 日更新：

在上次回答完问题之后，我就马上着手解决关于 emoji 的问题，目前已在 Textbus 2.*、Textbus 3.* 测试版中解决。不过由于 Firefox 不兼容，需要打特定补丁，大家可参考文档，添加对应 polyfill 即可。

八、富文本编辑器如何保存格式？

1.打开你的文字处理软件。这可能是MS Word（微软）、Apple Pages（MAC），或OpenOffice（免费）。创建一个空白文档页。

2.创建文档。输入您需要在文档上获得的任何信息。

3.选择“另存为”。一旦你完成后，点击菜单栏的左上部分的“文件”按钮或应用程序菜单，并选择“另存为”，下拉菜单。

4.命名文件。在“保存为”窗口中，将所需文档的名称写在所提供的文本字段上。

5.以富文本格式保存。这样做，在文件类型下拉菜单中点击，向下滚动列表，并选择“富文本格式（RTF）。”上的“保存”按钮，并将文档保存为RTF格式。

6.双击你想保存RTF文档文件。这将在您的计算机上打开对应的字处理程序，如MS Word（微软）、Apple Pages（MAC），或OpenOffice（免费）。

7.如果您愿意，重命名文档。在“保存为”窗口中，键入要为文档取的新名称，也可以只保留它不变。使用相同的文件名但不会覆盖现有文档，因为这是两种不同的文件类型。

九、为什么都说富文本编辑器是天坑？

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

本文我将向大家推荐 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. 「完全可定制」：具备完全可定制的能力，用户可以灵活定义样式、功能。

总结

无论你是一位专业的开发人员，还是一个有兴趣的学习者，这些开源编辑器将带给你无限的创造空间，同时可以轻松扩展和自定义，让你的工作更加高效和愉悦。选择一款可靠的富文本编辑器，是保持个人和团队协作竞争力的首要步骤。

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

十、csdn富文本编辑器怎么调字号？

设置中选择字体，将字体大小改为合适即可

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
点击我更换图片