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

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

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

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

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

一、WangEditor

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

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

优势嘛,就是简洁美观。

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

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

WangEditor 编辑器

二、Jodit

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

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

Jodit 编辑器

三、Quill

官网:https://quilljs.com/

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

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

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

Quill 编辑器

四、CKEditor

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

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

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

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

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

CKEditor 编辑器

五、TinyEditor

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

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

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

支持有:

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

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

TinyEditor 编辑器

六、Editor.js

官网:https://editorjs.io/

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

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

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

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

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

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

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

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

Editor.js 编辑器

七、Tiptap

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

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

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

Tiptap 编辑器

八、Blocksuite

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

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

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

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

BlockSuite 编辑器

九、lexical

官网:https://lexical.dev/

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

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

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

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

lexical 编辑器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/441864.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据分析-Pandas数据画箱线图

数据分析-Pandas数据画箱线图 数据分析和处理中,难免会遇到各种数据,那么数据呈现怎样的规律呢?不管金融数据,风控数据,营销数据等等,莫不如此。如何通过图示展示数据的规律? 数据表&#xff…

程序运行的基本流程

操作系统(应用程序): 装系统就是将操作系统安装到硬盘1中 计算机启动的基本过程: 总结: 程序一般保存在硬盘中,软件安装的过程就是将程序写入硬盘的过程程序在运行时会加载进入内存,然后由CPU…

C#,数值计算,解微分方程的龙格-库塔二阶方法与源代码

1 微分方程 含有导数或微分的方程称为微分方程,未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意…

计算数据集的总体标准差pstdev()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算数据集的总体标准差 pstdev() [太阳]选择题 pstdev() 的作用是() import statistics a [0, 0, 8, 8] print("【显示】a ",a) print("【执行】st…

GPT-4 等大语言模型(LLM)如何彻底改变客户服务

GPT-4革命:如何用AI技术重新定义SEO策略 在当今快节奏的数字时代,客户服务不再局限于传统的电话线或电子邮件支持。 得益于人工智能 (AI) 和自然语言模型 (NLM)(例如 GPT-4)的进步,客户服务正在经历革命性的转变。 在这…

网络故障基本判断方法

1)电脑上使用winR键,打开运行窗口,输入CMD命令,点击回车键 2)在弹出的CMD运行窗口中输入ipconfig命令 通过该命令可以查看本机的IP地址,子网掩码和网关等信息。确认电脑中所有网卡配置是否正确。 3&…

UNIAPP微信小程序中使用Base64编解码原理分析和算法实现

为何要加上UNIAPP及微信小程序,可能是想让检索的翻围更广把。😇 Base64的JS原生编解码在uni的JS引擎中并不能直接使用,因此需要手写一个原生的Base64编解码器。正好项目中遇到此问题,需要通过URLLink进行小程序跳转并携带Base64参…

MySQL 学习笔记(基础篇 Day3)

「写在前面」 本文为黑马程序员 MySQL 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. MySQL 学习笔记(基础篇 Day1) 2. MySQL 学习笔记&#xff08…

SpringBoot 多平台文件配置

目录 一 主配置文件和辅配置文件 二 具体使用 1. 通过直接修改 application.yml 中的属性值 2. 通过 maven 进行配置修改 当我们需要部署项目的时候, 肯定会遇到不同的部署环境下, 需要有不同的配置. 例如开发环境下和生产环境下的配置肯定就不会是完全相同的, 如数据库的…

找不到本地组策略编辑器解决办法

创建记事本写入以下命令 echo offpushd "%~dp0"dir /b %systemroot%\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >gp.txtdir /b %systemroot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-…

[java基础揉碎]方法的重写/覆盖

重写介绍 简单的说:方法覆盖(重写)就是子类有一个方法,和父类(也可能是爷爷,更上一级)的某个方法的名称、返回类型、参数一样,那么我们就说子类的这个方法 覆盖了父类的方法 重写重载对比

【内推】新风口-大模型独角兽公司minimax

先上内推链接: MiniMax社招内推码: AK3XEJ6 投递链接: https://vrfi1sk8a0.jobs.feishu.cn/s/iFY5WFgE 岗位:前端、后端、算法,基础架构都有,大量hc 公司介绍: 国内同时拥有文本、语音、视觉三种基础大模型能力的创业…

软考高级:信息系统生命周期概念和例题

作者:明明如月学长, CSDN 博客专家,大厂高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

【Neo4j系列】Neo4j之CQL语句和函数介绍

本文将对Neo4j中的CQL语句和CQL函数进行详细介绍。 作者:后端小肥肠 目录 1. 前言 2. CQL语句 2.1. CQL简介 2.2. CREATE命令 2.3. MATCH命令 2.4. RETURN命令 2.5. MATCH和RETURN 2.6. CREATEMATCHRETURN命令 2.7. 关系基础 2.8. CREATE创建标签 2.9. WH…

【博士每天一篇文献-综述】Modular Brain Networks

阅读时间:2023-11-27 1 介绍 年份:2016 作者:Olaf Sporns,Richard Betzel,印第安纳大学心理与脑科学杰出教授 期刊: Annual review of psychology 引用量:1205 详细介绍了模块化大脑网络及其如…

ubuntu 卸载miniconda3

一开始安装路径错了,需要重新安一次,就一起记录了。 前提是这种方式安装: ubuntu安装miniconda3管理python版本-CSDN博客 删除Miniconda的安装目录 这目录就是你选择安装的时候指定的,如果记不得了,可以这样查看 which conda 这…

JavaWeb——013SpringBootWeb综合案例(事务管理、AOP)

事务&AOP 目录 事务&AOP1. 事务管理1.1 事务回顾1.2 Spring事务管理1.2.1 案例1.2.2 原因分析1.2.3 Transactional注解 1.3 事务进阶1.3.1 rollbackFor1.3.3 propagation1.3.3.1 介绍1.3.3.2 案例 2. AOP基础2.1 AOP概述2.2 AOP快速入门2.3 AOP核心概念 3. AOP进阶3.1 …

<商务世界>《第8课 Leads——MQL——SQL——商机——成交》

1 各种概念 英文缩写概念Traffic流量Leads潜在客户,销售线索;简称潜在线索MQLMarketing-Qualified Leads市场认可线索SQLSales-Qualified Leads销售认可线索OPPOpportunity商机Account成单客户 2 线索到商机 一般企业会把自身线索进行如下的划分&…

挑战杯 基于深度学习的视频多目标跟踪实现

文章目录 1 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的视频多目标跟踪实现 …

排序——希尔排序、插入排序

本节复习排序中的希尔排序,希尔排序属于插入排序。 希尔排序的代码和插入排序非常类似。 思想却相对于插入排序来说复杂。 在复习希尔排序之前, 我们需要先复习一下插入排序。 目录 插入排序 插入过程 代码实现 希尔排序 希尔排序的思想 代码实…