几大开源免费的 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.mzph.cn/news/731165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Win11 没有网络bug

1.问题描述 没有网络,dns一直是固定的,但是dns已经是自动获取了(MAC地址随机) 2.解决办法 1.首先,删除所有网络的手动dns配置,控制中心那个dns管理没有用,在设置中删除网络,不然问题还会出现 - 2.然后,进入注册表\HKEY_LOCAL_MACH…

PHP在线图像处理程序:基于Photoshop的网页版图片处理源码

PHP在线PS修图网页版源码:实现照片图片处理的便捷工具 众所周知,许多朋友都喜欢使用PS进行图像编辑。然而,PS需要下载软件并对电脑配置要求较高。今天我们为大家带来一款基于浏览器的在线PS网页版源码,让您轻松实现在线P图和作图…

JMeter VS RunnerGo :两大主流性能测试工具对比

说起JMeter,估计很多测试人员都耳熟能详。它小巧、开源,还能支持多种协议的接口和性能测试,所以在测试圈儿里很受欢迎,也是测试人员常用的工具,不少企业也基于JMeter建立起自己的自动化测试能力,提升工作效…

【重要公告】BSV区块链协会开始对Teranode节点软件进行技术测试

​​发表时间:2024年2月22日 Teranode节点软件将使BSV区块链网络的交易处理速度提升至每秒110万笔,从而拓宽企业和政府客户的区块链应用范围。 2024年2月22日,瑞士楚格 - BSV区块链协会宣布已经开始对Teranode节点软件进行技术测试&#xff…

BUUCTF-Misc4

镜子里面的世界1 1.打开附件 解压,是一张图片 2. zsteg工具 用zsteg分析图片 3.得到flag ningen1 1.打开附件 是一张图片 2.binwalk 用binwalk -e 分离文件 3.ARCHPR工具 打开分离后的文件夹,有一个加密的压缩包,用ARCHPR解密 4.解密 将…

superset连接Apache Spark SQL(hive)过程中的各种报错解决

superset连接数据库官方文档:Installing Database Drivers | Superset 我们用的是Apache Spark SQL,所以首先需要安装下pyhive #命令既下载了pyhive也下载了它所依赖的其他安装包 pip install pyhive#多个命令也可下载 pip install sasl pip install th…

‘ jupyter ‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。

安装anaconda后,在 Dos黑窗口 运行 jupyter notebook 的两个问题 原因:没配置环境变量 解决方法: 在 系统环境变量Path 中 添加两个地址 这里以anaconda安装在 D:\anaconda\install 下为例 (根据个人安装具体位置而定&#xff…

Elasticsearch:什么是 DevOps?

DevOps 定义 DevOps 是一种现代软件开发方法,它将公司软件开发 (Dev) 和 IT 运营 (Ops) 团队的工作结合起来并实现自动化。 DevOps 提倡这样一种理念:这些传统上独立的团队在协作方面比在孤岛中更有效。 理想情况下,DevOps 团队共同努力改进…

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能。然而,对于非AI专家来说,制定高质量的提示来引导 LLMs 是目前AI应用领域的一项重要挑战。现有的提示…

优惠券秒杀案例 - CAS、Redis+Lua脚本解决高并发并行

目录 一、认识悲观锁和乐观锁? 二、一人一单问题(优化) 三、并行执行带来的问题 3.1Redis实现分布式锁 3.1.1 基础代码 3.1.2 保证释放的锁是自己的 3.1.3 Lua脚本保证原子性 情景介绍: 超卖问题在我们业务中很常见&#x…

合并有序数组

合并有序数组 题目描述:解法思路:解法代码:运行结果: 题目描述: 输入两个升序排列行的序列,将两个序列合并为一个有序序列并输出。 输入包含三行,第一包含两个正整数n, m,用空格分隔…

来说说看到的求职路上可以提高的地方——简历

要进行求职的时候应该遇到的第一件事情就是简历。 随着看到的简历越来越多,也发现了一些问题,来开个帖子来说说这些问题。 格式 让参加面试的人最头疼的地方就是简历格式没有空格。 最近发现好多人的简历格式上都不空格,很多内容完全都在…

AIGC启示录:深度解析AIGC技术的现代性与系统性的奇幻旅程

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

php使用ElasticSearch

ElasticSearch简介 Elasticsearch 是一个分布式的、开源的搜索分析引擎,支持各种数据类型,包括文本、数字、地理、结构化、非结构化。 Lucene与ElasticSearch Apache Lucene是一款高性能的、可扩展的信息检索(IR)工具库&#xf…

灯塔:CSS笔记(2)

一 选择器进阶 后代选择器:空格 作用:根据HTML标签的嵌套关系,,选择父元素 后代中满足条件的元素 选择器语法:选择器1 选择器2{ css } 结果: *在选择器1所找到标签的后代(儿子 孙子 重孙子…

基于SSM的党务政务服务热线平台(有报告)。Javaee项目。ssm项目。

演示视频: 基于SSM的党务政务服务热线平台(有报告)。Javaee项目。ssm项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spri…

mac本地启动sentinel

启动Sentinel控制台 1)下载sentinel控制台jar包 https://github.com/alibaba/Sentinel/releases/download/1.8.6/sentinel-dashboard-1.8.6.jar 2)启动sentinel控制台 使用如下命令启动控制台: java -Dserver.port8080 -Dcsp.sentinel.d…

python淘宝网页爬虫数据保存到 csv和mysql(selenium)

数据库连接设置(表和字段要提前在数据库中建好) # 数据库中要插入的表 MYSQL_TABLE goods# MySQL 数据库连接配置,根据自己的本地数据库修改 db_config {host: localhost,port: 3306,user: root,password: ma*****6,database: may2024,charset: utf8mb…

Flink 物理执行图

文章目录 物理执行图一、Task二、ResultPartition三、ResultSubpartition四、InputGate五、InputChannel 物理执行图 JobManager根据ExecutionGraph对作业进行调度,并在各个TaskManager上部署任务。这些任务在TaskManager上的实际执行过程就形成了物理执行图。物理…

Linux环境下使用线程方式操作UART读写功能

目录 概述 1 Linux环境下UART设备 2 轮询方式操作UART功能实现 2.1 打开串口函数:usr_serial_open 2.2 关闭串口函数: usr_serial_close 2.3 发送数据函数: usr_serial_sendbytes 2.4 接收数据函数: thread_uart_readbytes …