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

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

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

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

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

  基于API的设计:通过简略的API可以细粒度地访问编辑器的内容,更改跟风波。使用JSON作为键入跟输出,可以始终如一地工作。自定义内容跟格式:Quill公开了自己的文档模型,允许进行扩充跟自定义。通过扩充Quill可以支持的无限格式跟内容。已经有用户添加了幻灯片,交互式清单跟3D模型。跨平台:支持PC,平板跟相机上的所有现代浏览器。体验相似的一致行为,并跨平台生成HTML。易于使用:Quill带有默认值,您只需几行Javascript就可以立刻使用它:Draft.js:Facebook 开源的基于React的编辑器框架

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

  Draft.js Demo

  可扩充跟可定制:draft.js 并不是一个拆箱即用的编辑器,它提供了一系列富文本编辑器的开发工具,开发人员才能争创从基本文本式样至嵌入式媒体各类丰富的富文本编写感受。声明式富文本编辑器:Draft.js无缝对接React应用typecho 富文本编辑器,使用熟悉的API提取渲染,选择跟键入行为的细节。不变的编辑器状态:Draft.js模型使用immutable-js建立,draft.js 中所有数据都是不可变的。每次更改就会改建数据,内存中会保存原先的数据状态,方便返回至上一步Slate:用于建立富文本编辑器的自定义框架

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

  Rich Text - Slatejs

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

  Trix: 输出简约一致的HTML

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

  trix demo by basecamp

  Trix是适于撰写消息,评论typecho 富文本编辑器,文章跟列表(大多数Web应用程序组成的简略文档)的编辑器。它具备复杂的文档模型,支持嵌入式附件,并输出简约一致的HTML

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

  medium-editor :极简行内编辑器

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

  作为追随键盘跟焦点的编辑器,使用感受

  MediumEditor是一个开源行内编辑器工具栏,使用简略,鼠标选择即可对内容进行编辑。基于JavaScript撰写的,仅约28k,不依赖于任何第三方开源库兼容Chrome 、Firfox、Safari、IE、Edge等主流浏览器,支持IE9。

  可以按照还要调整色调

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

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

  editorjs demo

  关于块式样:Editor.js 工作区由单独的块组成,包括词句、标题、图像、列表与破折号等,它们都是由 Editor.js 中的 Plugin 提供的独立的内容可编辑元素(或更复杂的结构),并由 Editor.js 的 Core 组合而成。关于输出 JSON:Editor.js 则输出带有每位块数据的 JSON 对象。数据可以按您的还要使用:使用HTML为Web客户端展现、为联通应用程序本机展现、为Facebook即时文章或Google AMP争创标记、生成音频版本等等。干净的数据对于前端的清除、验证跟处理特别有用。浏览器支持:Edge 12+ / Firefox 18+ / Chrome 49+ / Safari 10+ / Safari 10+ / Opera 36wangEditor: 国内开发者的羽量级web富文本框

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

  使用上去很方便

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

  菜单跟编辑区域虽然就是两个单独的

  ,位置、尺寸都可以随意定义。如果想要象 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样,将编辑区域跟菜单分离就可以实现了。

  菜单跟编辑器区域可自定义款式。例如:将菜单fixed、编辑器区域高度手动降低等

  编辑区域跟菜单分离

  summernote:Bootstrap 可视化HTML编辑器

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

  summernote Demo

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

  支持Bootstrap3.x.x至4.x.x;轻量(js+css:100Kb)适用于所有主要浏览器:Safari、Chrome、Firefox、Opera、Edge跟Internet Explorer 9+适用于所有主要操作系统:Windows、MacOS、Linuxtinymce

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

  TinyMCE 5

  项目社区开源版 - Free Forever

  可订制的UI与功能:TinyMCE 5可以进行订制以适于系统,从而无缝融入既有设计。使用者可以专注于产品设计。提高用户满意度:可以在更短的时间内完成更多工作。实践证明,TinyMCE 5每年可为内容创建者节约数千个小时,同时降低了用户参与度。tiptap:基于Vue.js的无渲染富文本编辑器

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

  Base on:Prosemirror

  basic example of tiptap

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

  结语:以上就是本期全部的分享了。为了服务大多数的普通顾客,这期除去了只支持Markdown的编辑器。可能你们因时间成因难以自己维护而选择这些拆箱即用的,也或许须要深度订制而选择框架类的,亦或就是要极至的简略而选择这些复古款编辑器。希望你们都能在此找到有用的内容服务手头的项目。

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

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

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

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

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

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

Last modification:May 1st, 2021 at 10:13 am
如果觉得我的文章对你有用,请随意赞赏