当前位置:首页 > 技术分析 > 正文内容

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

ruisui881个月前 (05-07)技术分析18

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。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3842.html

标签: quilljs
分享给朋友:

“几大开源免费的 JavaScript 富文本编辑器测评” 的相关文章

发行版Vanilla OS 2发布稳定版:彻底重写、改变使用Linux的方式

Vanilla OS 是去年崭露头角的 Linux 发行版,最初的 1.0 版本基于 Ubuntu 构建 —— 亮点之一是系统核心“不可变”。后来改用 Debian 测试分支 (Debian Sid),免费且开源,默认桌面环境是 GNOME。什么是不可变 Linux 发行版?不可变发行版确保操作系统...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

Vue2的16种传参通信方式

前言先直入主题列出有哪些传参方式,下面再通过事例一一讲解。props(父传子)$emit与v-on (子传父)EventBus (兄弟传参).sync与update: (父子双向)v-model (父子双向)ref$children与$parent$attrs与$listeners (爷孙双向)pr...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...

深入理解vue-router原理

说到vue-router就表明他只适合于vue和vue是强绑定的关系;不适合其他框架;现在我们模仿实现一个VueRouter;1.要使页面刷新;借助vue本身的响应式原理;import Home from "./views/Home"; import About from "...

一文看懂企业微信开发简易教程

为让开发者快速理解开发流程,本篇章展示如何一步步设计一个能与企业后台互动的自建应用。添加自建应用登录企业微信管理端 -> 应用与小程序 -> 应用 -> 自建,点击“创建应用”,设置应用logo、应用名称等信息,创建应用。创建完成后,在管理端的应用列表里进入该应用,可以看到agen...