几大开源免费的 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…

vue和react的diff算法源码

Vue.js 中的虚拟 DOM Diff 算法是其性能优化的关键之一。 Vue.js 的 Diff 算法主要基于 Snabbdom,以下是 Vue.js 中虚拟 DOM Diff 算法的简化版伪代码,以便说明其基本思想: function patch(oldVnode, vnode) {// 如果 oldVnode 不存在&…

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

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

编程笔记 html5cssjs 001 学习编程从网页开始 第一个网页

编程笔记 html5&css&js 001 学习编程从网页开始 第一个网页 一、代码二、解释 这是第一个网页&#xff0c;也是一个模板。 一、代码 <!-- 声明文档类型 --> <!DOCTYPE html> <html lang "zh-cn" ><!-- 页面头部开始 --><head &…

Apache Pulsar的分布式集群模式构建

1. 准备环境 6台带jdk8的Linux服务器&#xff08;CentOS7为例&#xff09; ip分别为&#xff1a; 主机名IP地址zookeeper1192.168.8.101zookeeper2192.168.8.102zookeeper3192.168.8.103pulsar1192.168.8.108pulsar2192.168.8.109pulsar3192.168.8.110 2. 下载Pulsar最新安…

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

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

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

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

BUUCTF-Misc4

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

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

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

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

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

Elasticsearch:什么是 DevOps?

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

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

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

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

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

Hive中UNION ALL和UNION的区别

1.概述 Hive官方提供了一种联合查询的语法&#xff0c;原名为Union Syntax&#xff0c;用于联合两个表的记录进行查询&#xff0c;此处的联合和join是不同的&#xff0c;join是将两个表的字段拼接到一起&#xff0c;而union是将两个表的记录拼接在一起。 换言之&#xff0c; jo…

合并有序数组

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

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

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

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

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

mysql笔记:11. 性能优化

文章目录 概览查询速度优化1. 分析查询语句1.1 EXPLAIN1.2 DESCRIBE 2. 使用索引优化查询3. 优化子查询 数据库结构优化1. 分解表2. 建立中间表3. 增加冗余字段4. 优化插入速度4.1. MyISAM引擎表4.2. InnoDB引擎表 5. 分析表、检查表和优化表5.1. 分析表5.2. 检查表5.3. 优化表…

php使用ElasticSearch

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

苹果AR设备未来展望:硬件舒适性、软件功能与网络速度等多维度期待

苹果增强现实(AR)设备(可能是指Apple Vision Pro)的期待和改进建议,以及关于硬件、软件、网络速度和WIFI技术的未来展望。以下是对这些观点的综合分析: 硬件与舒适性改进: 更轻更舒适的材料以及更贴合眼眶的设计能够提升用户的佩戴体验,减少长时间使用带来的不适。自动…