您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

开源富文本编辑器不好找?看这完这10个项目就该有数了

时间:2020-05-03 09:45:00  来源:  作者:

最近项目里常听产品们谈到后台的文本编辑器就烦恼,吐槽样式难看,说后台效果和前台展示不一样,还有吐槽操作不方便功能不全没有自定义功能的问题。头疼也要解决,假若用着用着被迫换编辑器,用户和团队估计要件要崩溃。

本着开源世界解决一切的宗旨,我又开始逛荡这github大市场了。以Github stars数为主要的评估依据,兼顾最新更新日期和提交数量,以保证框架能够让我们用的更长久。

 

Quill:丰俭由人的编辑器,确实好用

Github stars: 26.3k , commits: 5,199,License: BSD 3-clause

开源富文本编辑器不好找?看这完这10个项目就该有数了

丰俭由人的编辑器,确实好用

  1. 基于API的设计:通过简单的API可以细粒度地访问编辑器的内容,更改和事件。使用JSON作为输入和输出,可以始终如一地工作。
  2. 自定义内容和格式:Quill公开了自己的文档模型,允许进行扩展和自定义。通过扩展Quill可以支持的无限格式和内容。已经有用户添加了幻灯片,交互式清单和3D模型。
  3. 跨平台:支持PC,平板和手机上的所有现代浏览器。体验相同的一致行为,并跨平台生成html
  4. 易于使用:Quill带有默认值,您只需几行JAVAscript就可以立即使用它:

 

Draft.js:Facebook 开源的基于React的编辑器框架

Github stars: 17.9k , commits: 965,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

Draft.js Demo

  1. 可扩展和可定制:draft.js 并不是一个开箱即用的编辑器,它提供了一系列富文本编辑器的开发工具,开发人员能够创建从基本文本样式到嵌入式媒体各种丰富的富文本撰写体验。
  2. 声明式富文本编辑器:Draft.js无缝对接React应用,使用熟悉的API提取渲染,选择和输入行为的细节。
  3. 不变的编辑器状态:Draft.js模型使用immutable-js构建,draft.js 中所有数据都是不可变的。每次修改都会新建数据,内存中会保存原来的数据状态,方便返回到上一步

Slate:用于构建富文本编辑器的自定义框架

Github stars: 17.4k, commits: 3,100,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

Rich Text - Slatejs

项目由贡献者驱动的,没有任何大型公司的支持,当前处于测试版,核心API现在可以使用,但是它的某些API尚未“最终确定”

 

Trix: 输出简洁一致的HTML

Github stars: 15k, commits: 2,593,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

trix demo by basecamp

Trix是用于编写消息,评论,文章和列表(大多数Web应用程序组成的简单文档)的编辑器。它具有复杂的文档模型,支持嵌入式附件,并输出简洁一致的HTML

开源富文本编辑器不好找?看这完这10个项目就该有数了

Trix对设备及浏览器的支持情况

 

medium-editor :极简行内编辑器

Github stars: 14.4k, commits: 2,602,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

作为跟随鼠标和焦点的编辑器,使用体验

  1. MediumEditor是一个开源行内编辑器工具栏,使用简单,鼠标选择即可对内容进行编辑。
  2. 基于JavaScript编写的,仅约28k,不依赖于任何第三方开源库
  3. 兼容Chrome 、Firfox、Safari、IE、Edge等主流浏览器,支持IE9。
开源富文本编辑器不好找?看这完这10个项目就该有数了

可以根据需要调整风格

 

editor.js:由块组成内容并返回 JSON 的编辑器

Github stars: 11.7k, commits: 518,License: Apache-2.0

开源富文本编辑器不好找?看这完这10个项目就该有数了

editorjs demo

  1. 关于块样式: Editor.js 工作区由单独的块组成,包括段落、标题、图像、列表与引号等,它们都是由 Editor.js 中的 Plugin 提供的独立的内容可编辑元素(或更复杂的结构),并由 Editor.js 的 Core 组合而成。
  2. 关于输出 JSON: Editor.js 则输出带有每个块数据的 JSON 对象。数据可以按您的需要使用:使用HTML为Web客户端呈现、为移动应用程序本机呈现、为Facebook即时文章或google AMP创建标记、生成音频版本等等。干净的数据对于后端的清理、验证和处理非常有用。
  3. 浏览器支持: Edge 12+ / Firefox 18+ / Chrome 49+ / Safari 10+ / Safari 10+ / Opera 36

 

wangEditor: 国内开发者的轻量级web富文本框

Github stars: 9.6k, commits 361,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

使用起来很方便

基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费,创建编辑器时只需要引用 JS,无需引用任何 CSS。

菜单和编辑区域其实就是两个单独的<div>,位置、尺寸都可以随便定义。如果想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样,将编辑区域和菜单分离就可以实现了。

菜单和编辑器区域可自定义样式。例如:将菜单fixed、编辑器区域高度自动增加等

开源富文本编辑器不好找?看这完这10个项目就该有数了

编辑区域和菜单分离

 

summernote:Bootstrap 可视化HTML编辑器

Github stars: 9.4k , commits: 3,265,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

summernote Demo

summernote是一个简单灵活的所见即所得的 HTML 在线编辑器.

  1. 支持Bootstrap3.x.x到4.x.x;轻量(js+css:100Kb)
  2. 适用于所有主要浏览器:Safari、Chrome、Firefox、Opera、Edge和Internet Explorer 9+
  3. 适用于所有主要操作系统:windowsmacOS、linux

 

tinymce

Github stars: 7.9k, commits: 23,239,License: LGPL-2.1 license

开源富文本编辑器不好找?看这完这10个项目就该有数了

TinyMCE 5

项目社区开源版 - Free Forever

  1. 可定制的UI与功能:TinyMCE 5可以进行定制以适合系统,从而无缝融入既有设计。使用者可以专注于产品设计。
  2. 提高用户满意度:可以在更短的时间内完成更多工作。实践证明,TinyMCE 5每年可为内容创建者节省数千个小时,同时增加了用户参与度。

tiptap:基于Vue.js的无渲染富文本编辑器

Github stars: 7.1k, commits: 1,027,License: LGPL-2.1 license

Base on:Prosemirror

开源富文本编辑器不好找?看这完这10个项目就该有数了

basic example of tiptap

不是taptap,Tiptap没有任何CSS,用户将(几乎)完全控制标记和样式。用户可以将数据另存为原始HTML字符串,也可以获取JSON文档的-serializable表示形式。

 


结语:以上就是本期全部的分享了。为了服务大多数的普通客户,这期去掉了只支持Markdown的编辑器。可能大家因时间原因无法自己维护而选择那些开箱即用的,也可能需要深度定制而选择框架类的,亦或就是要极致的简单而选择那些极简款编辑器。希望大家都能在此找到有用的内容服务手头的项目。

如果有其他想推荐的编辑器可以留言回复我哦!

其实原本还有个项目也在分享的List中-Pell, 可以说是 最简单,最小的WYSIWYG文本编辑器

Github stars: 11.2k, commits 79,License: MIT license

开源富文本编辑器不好找?看这完这10个项目就该有数了

简单到没有多余的语言来介绍

引用官网的一句介绍吧:DOWNLOAD / INSTRUCTIONS / INFORMATION view on Github

起初纳闷为啥这么多stars,那么久没更新,看了看项目就明白了:至简如水,过多的包装都是浪费。



Tags:富文本编辑器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
不仅仅是web端,貌似很多地方,都有一定的富文本编辑器轮子,但是像我这样针对不同用户不同业务不同需求的,几乎玩转过所有能找到的富文本编辑器工具,基本上就没个让人省心的。如果...【详细内容】
2020-05-07  Tags: 富文本编辑器  点击:(72)  评论:(0)  加入收藏
最近项目里常听产品们谈到后台的文本编辑器就烦恼,吐槽样式难看,说后台效果和前台展示不一样,还有吐槽操作不方便功能不全没有自定义功能的问题。头疼也要解决,假若用着用着被迫...【详细内容】
2020-05-03  Tags: 富文本编辑器  点击:(94)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条