几大开源免费的 JavaScript 富文本编辑器测评

boyanx4个月前技术教程17

MarkDown 编辑器用的时间长了,发现发现富文本编辑器用起来是真的舒服。

一直以来写博客都是用的 MarkDown 编辑器,MarkDown 文档简单方便,使用几个简单的符号就可以定义出样式统一的富文本内容。写博客的时间长了,小玖就越来越排斥用富文本编辑器了。

现在回过头来用富文本编辑器,体验是真的不错。样式定义灵活,所见即所得,可以轻松实现在 MarkDown 文档上无法实现的样式,简直不要太舒服。

于是忍不住就多调研了几款比较常见的富文本编辑器,简单分享一下。


WangEditor

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

这是小玖接触的第一款富文本编辑器,很久以前做的一个论坛系统用的就是这个编辑器,轻量、样式简洁美观,曾经很受小玖喜欢。

优势嘛,就是简洁美观。

缺点也很明显,这个编辑器功能不够丰富,也不支持插件。字体颜色只能选预定义的几个颜色,表格不能合并单元格,图片不能悬浮在文字侧边显示。

还有就是,作者不打算再继续维护了。 但如果需求简单的话,这款编辑器还是不错的。


WangEditor

官网:https://xdsoft.net/jodit/

一个轻量的富文本编辑器,功能相比较于 WangEditor 更加完善,个人感觉比 WangEditor 好些。


Quill

官网:https://quilljs.com/

仓库:
https://github.com/quilljs/quill

功能非常简洁,在官网的 Demo 中看,貌似连插入表格的选项都没有看到。然后也没有位置排版相关的功能,图片也不能放大缩小,总而言之,功能很少。

优点的话,也是简洁美观,容易上手操作。有一些插件可以扩展编辑功能,但还是很有限。


CKEditor

官网:
https://ckeditor.com/ckeditor-5/

这款编辑器可扩展性比较强,插件的功能也比较全面,功能特性有:

  • 支持导出 Word、Pdf,导入 Word 文本;
  • 支持 AI 文本助手,支持多人协作(需要付费);
  • 支持行内图片、图片左右侧悬浮;
  • 表格支持合并单元格,并有提供表格模板;
  • 支持输出为 Markdown 文档。

插件功能很丰富是这个编辑器的优势,相对应的这个编辑器开发使用起来就没有 WangEditor 编辑器那么轻松了。

在布局上,这款编辑器支持多种布局方式,支持近几年流行起来的基于块的布局模式,在编辑器中还能支持插入布局模板内容。


TinyEditor

官网:https://www.tiny.cloud/

这是一款和 CKEditor 功能比较像的编辑器,CKEditor 编辑器有的功能它大都含括在内。但是这个编辑器含收费版本,AI 助手也需要专业版才可以用。

开源,支持云部署,需要申请一个 ApiKey ,然后按调用次数收费。

支持有:

  • 支持与后端模板结合,貌似支持插入用于模板替换的变量字符;
  • 支持插入评论;
  • 支持插件方式扩展编辑器;
  • 支持显示富文本区块边界;
  • ……

编辑器原生的功能非常简单,通过插件可以扩展出非常多的功能,但是除了基础插件大部分插件都是需要付费的。然后图片的拖动并不是很好控制,一些编辑体验也不是非常好。


Editor.js

官网:https://editorjs.io/

插件库:
https://github.com/editor-js/awesome-editorjs

这是一个模块化的富文本编辑器。

所谓模块化就是说把富文本标签当做一个模块单元,以这个模块为单位进行位置和样式的控制,可以动态的移动模块的位置。

在这个编辑器中,一行就是一个模块单元,可以选择相应类型的模块添加。然后模块是插件化的,可以以插件的形式自己写模块加入编辑器。

官方也有一个插件库,但据小玖观察,这个插件库并不完善,一些插件的样式也不太好看。

插件库:
https://github.com/editor-js/awesome-editorjs

这个编辑器优势在可扩展性,可以通过插件的形式添加自己自定义的模块。

缺点也比较多,由于模块化了,编辑时的内容和实际展示时有一小点差别。然后这个编辑器功能上受了模块化很大限制,比如图片大小不能控制,表格不能合并单元格等等……然后官方的插件库也不是非常完善。



07

Tiptap

这是也是一个模块化的编辑器,在操作上与 Editor.js 极其相似,但插件库相比而言更加丰富。

这个库是开源的,但也分付费版本,如果不使用云文档的化,免费版本几乎没什么限制,除了 AI 助手等插件是需要付费的。

优点是插件多,易扩展,缺点的化也是布局限制较多,模块化的编辑方式没有那么灵活,不能随意在任何位置插入图片等内容。


Blocksuite

官网:
https://blocksuite.affine.pro/

仓库地址:
https://github.com/toeverything/blocksuite

体验Demo:https://app.affine.pro/

也是一款基于块的编辑器,专注团队协作,是 AFFiNE 背后的开源项目,整个编辑器和 Notion 非常相似。但是感觉上不适合用来做富文本编辑器,更适合做笔记记录。


lexical

官网:https://lexical.dev/

仓库地址:
https://github.com/facebook/lexical

体验Demo:
https://playground.lexical.dev/

Facebook 团队开发维护的编辑器,是一款基于块模式的编辑器,界面简洁美观。

目前还属于实验性阶段,从使用体验上来看,支持 MarkDown 文档格式,目前还不稳定,随便使用了几个功能就发现了 bug。

相关文章

uniapp中使用ace在网页上做代码编辑器

A、安装npm install ace-buildsB、在uniapp中使用<template> <view class="content"> <...

安卓最有名的网页编辑器(安卓网页设计工具)

安卓平台上有几款较为知名的网页编辑器,如Quoda、DroidEdit等,它们凭借丰富的功能和良好的用户体验受到广泛关注,以下是具体介绍 :- Quoda:是一款强大的免费多语言代码编辑器,支持HTM...

Github 21k star,这个JS组件让你的数据表格秒杀Excel!

在Web应用开发的战场上,数据表格一直是一个让开发者既爱又恨的领域。一方面,几乎所有企业级应用都离不开它;另一方面,构建一个既美观又功能完备的数据表格,往往需要耗费大量时间和精力。更不用说用户总是会说...

全网最全的 Windows 系统下 Node.js 安装与配置

各位代码江湖的 “萌新大侠” 们!今天详细介绍 windows 下 node.js 的安装与配置,看这篇文章就够了。一、下载安装官网下载:下载 | Node.js 中文网选择需要下载的版本,这是之前的...

一款强悍的 HTML5 Canvas 2D 图形渲染引擎:Leafer JS!

经过3 年多开发的 LeaferJS 开源引擎终于打磨成熟,迎来了正式版的发布!号称只用 1.5s 可以渲染 100万个矩形,并且还是国产的。Leafer JS是一款开源的HTML5 Canvas 2...

js基础学习(js基础知识)

vscode运行js要在VSCode中运行JavaScript代码,你需要按照以下步骤操作:首先确保你已经安装了Node.js。如果没有安装,可以从官网(https://nodejs.org/)下载并...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。