Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/JefMari/awesome-wysiwyg-editors

A curated list of awesome WYSIWYG Editors.
https://github.com/JefMari/awesome-wysiwyg-editors

List: awesome-wysiwyg-editors

awesome awesome-list rich-text-editor wysiwyg wysiwyg-editor

Last synced: 2 months ago
JSON representation

A curated list of awesome WYSIWYG Editors.

Lists

README 

        
# Awesome WYSIWYG [![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re)  [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)



> 精选的所见即所得（WYSIWYG）编辑器列表。



[English](./readme.md) | 简体中文



## 内容



- [独立的](#独立的)

- [基于 JQuery](#基于-jquery)

- [基于 Angular](#基于-angular)

- [基于 React](#基于-react)

- [基于 Vue](#基于-vue)

- [基于 Ruby](#基于-ruby)

- [类似 WYSIWYG](#类似-wysiwyg)



## 独立的



所见即所得的编辑器，可以不依赖其他库或框架而使用。



- [Aloha Editor](https://github.com/alohaeditor/Aloha-Editor) - Aloha Editor 是一个 JavaScript 内容编辑库。 ![github star](https://img.shields.io/github/stars/alohaeditor/Aloha-Editor.svg?style=social&label=Star)

- [CKEditor 4](https://github.com/ckeditor/ckeditor-dev) - 经过战斗考验的 WYSIWYG HTML 编辑器。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor-dev.svg?style=social&label=Star)

- [CKEditor 5](https://github.com/ckeditor/ckeditor5) - 一套用强大的框架创建的随时可用的富文本编辑器。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor5.svg?style=social&label=Star)

- [Content Tools](https://github.com/GetmeUK/ContentTools) - 一个用于构建 HTML 内容的所见即所得编辑器的 JS 库。 ![github star](https://img.shields.io/github/stars/GetmeUK/ContentTools.svg?style=social&label=Star)

- [Etherpad](https://github.com/ether/etherpad-lite) - Etherpad。真正的实时协作式文档编辑。 ![github star](https://img.shields.io/github/stars/ether/etherpad-lite.svg?style=social&label=Star)

- [Froala Editor](https://github.com/froala/wysiwyg-editor) `$ Non-Free ⊘ Proprietary` - 一个设计精美的基于 HTML5 的 WYSIWYG 富文本编辑器。 ![github star](https://img.shields.io/github/stars/froala/wysiwyg-editor.svg?style=social&label=Star)

- [grande.js](https://github.com/mduvall/grande.js) - 这是在星巴克的一个中型。小指头响了。 ![github star](https://img.shields.io/github/stars/mduvall/grande.js.svg?style=social&label=Star)

- [Jodit](https://github.com/xdan/jodit) - 丰富的 HTML WYSIWYG 编辑器和文件浏览器。 ![github star](https://img.shields.io/github/stars/xdan/jodit.svg?style=social&label=Star)

- [Medium Editor](https://github.com/yabwe/medium-editor) - Medium.com WYSIWYG编辑器的克隆。使用contenteditable API来实现富文本解决方案。 ![github star](https://img.shields.io/github/stars/yabwe/medium-editor.svg?style=social&label=Star)

- [Medium.js](https://github.com/jakiestfu/Medium.js) - 一个微小的JavaScript库，用于使 contenteditable 美观（类似 Medium 的编辑器）。 ![github star](https://img.shields.io/github/stars/jakiestfu/Medium.js.svg?style=social&label=Star)

- [Mobiledoc Kit](https://github.com/bustlelabs/mobiledoc-kit) - 使用 Mobiledoc 构建所见即所得编辑器的工具包。 ![github star](https://img.shields.io/github/stars/bustlelabs/mobiledoc-kit.svg?style=social&label=Star)

- [Pell](https://github.com/jaredreich/pell) - 最简单和最小的（1kB）Web WYSIWYG 文本编辑器，没有任何依赖性。 ![github star](https://img.shields.io/github/stars/jaredreich/pell.svg?style=social&label=Star)

- [Pen Editor](https://github.com/sofish/pen) - 享受实时编辑（+ markdown）。 ![github star](https://img.shields.io/github/stars/sofish/pen.svg?style=social&label=Star)

- [Quill](https://github.com/quilljs/quill) - 一个现代化的富文本编辑器，为兼容性和可扩展性而构建。 ![github star](https://img.shields.io/github/stars/quilljs/quill.svg?style=social&label=Star)

- [Scribe](https://github.com/guardian/scribe) - 一个适用于 web 平台的富文本编辑器框架，为浏览器的不一致性和合理的默认值提供了补丁。 ![github star](https://img.shields.io/github/stars/guardian/scribe.svg?style=social&label=Star)

- [Slate](https://github.com/ianstormtaylor/slate) - 一个完全可定制的框架，用于构建富文本编辑器。 ![github star](https://img.shields.io/github/stars/ianstormtaylor/slate.svg?style=social&label=Star)

- [Squire](https://github.com/neilj/Squire) - 一个 HTML5 富文本编辑器，它提供强大的跨浏览器规范化，同时又是极其轻巧和灵活的。 ![github star](https://img.shields.io/github/stars/neilj/Squire.svg?style=social&label=Star)

- [Substance](https://github.com/substance/substance) - 一个用于基于 web 的内容编辑的JavaScript库。 ![github star](https://img.shields.io/github/stars/substance/substance.svg?style=social&label=Star)

- [SunEditor](https://github.com/JiHong88/SunEditor) - 纯粹的基于 javascript 的 WYSIWYG html 编辑器，没有依赖性。 ![github star](https://img.shields.io/github/stars/JiHong88/SunEditor.svg?style=social&label=Star)

- [TinyMCE](https://github.com/tinymce/tinymce) - 一个用于平台独立的 "WYSIWYG" 或富文本编辑的JavaScript库。 ![github star](https://img.shields.io/github/stars/tinymce/tinymce.svg?style=social&label=Star)

- [tiptap](https://github.com/ueberdosis/tiptap) - 为 web 技术提供的无头编辑器框架。 ![github star](https://img.shields.io/github/stars/ueberdosis/tiptap.svg?style=social&label=Star)

- [Trix](https://github.com/basecamp/trix) - 一个用于日常写作的富文本编辑器。 ![github star](https://img.shields.io/github/stars/basecamp/trix.svg?style=social&label=Star)

- [Tui Editor](http://ui.toast.com/tui-editor) - Markdown WYSIWYG 编辑器。GFM 标准+图表&UML 可扩展。 ![github star](https://img.shields.io/github/stars/nhn/tui.editor.svg?style=social&label=Star)

- [UEditor](https://github.com/fex-team/ueditor) - UEditor 是一个所见即所得的丰富的 WEB 编辑器，由百度 fex-team 开发。它是轻量级的、可定制的和面向用户的。 ![github star](https://img.shields.io/github/stars/fex-team/ueditor.svg?style=social&label=Star)

- [wangEditor](https://github.com/wangeditor-team/wangEditor/blob/master/README-en.md) - 一个轻量级的富文本编辑器，友好的API，使用极为方便。 ![github star](https://img.shields.io/github/stars/wangeditor-team/wangEditor.svg?style=social&label=Star)

- [wysihtml](https://github.com/Voog/wysihtml) - 面向现代 Web 的开源富文本编辑器。 ![github star](https://img.shields.io/github/stars/Voog/wysihtml.svg?style=social&label=Star)



## 基于 JQuery



编辑器依赖 JQuery



- [bootstrap-wysiwyg](https://github.com/steveathon/bootstrap-wysiwyg) - 小巧的 bootstrap 兼容的WYSIWYG富文本编辑器。 ![github star](https://img.shields.io/github/stars/steveathon/bootstrap-wysiwyg.svg?style=social&label=Star)

- [Dante Editor](https://github.com/michelson/Dante) - 只是另一个 Medium wysiwyg 编辑器的克隆。 ![github star](https://img.shields.io/github/stars/michelson/Dante.svg?style=social&label=Star)

- [Easyeditor](https://github.com/im4aLL/easyeditor) - 非常轻量级和高度可配置的富文本 HTML 编辑器。 ![github star](https://img.shields.io/github/stars/im4aLL/easyeditor.svg?style=social&label=Star)

- [jQuery-Notebook](https://github.com/raphaelcruzeiro/jquery-notebook) - 一个现代、简单、优雅的所见即所得的富文本编辑器。 ![github star](https://img.shields.io/github/stars/raphaelcruzeiro/jquery-notebook.svg?style=social&label=Star)

- [popline](https://github.com/kenshin54/popline) - 一个 HTML5 富文本编辑器的工具栏。 ![github star](https://img.shields.io/github/stars/kenshin54/popline.svg?style=social&label=Star)

- [simditor](https://github.com/mycolorway/simditor) - 一个简单而快速的所见即所得编辑器。 ![github star](https://img.shields.io/github/stars/mycolorway/simditor.svg?style=social&label=Star)

- [Summernote](https://github.com/summernote/summernote) - 超级简单的 WYSIWYG 编辑器。 ![github star](https://img.shields.io/github/stars/summernote/summernote.svg?style=social&label=Star)

- [Toast UI Editor](https://github.com/nhnent/tui.editor) - Markdown 所见即所得编辑器 - 生产性和可扩展性。 ![github star](https://img.shields.io/github/stars/nhnent/tui.editor.svg?style=social&label=Star)

- [Trumbowyg](https://github.com/Alex-D/Trumbowyg) - 一个轻量级和惊人的所见即所得的 JavaScript 编辑器 - 只有 20kB（8kB gzip）。 ![github star](https://img.shields.io/github/stars/Alex-D/Trumbowyg.svg?style=social&label=Star)



## 基于 Angular



为你的基于 angular 的项目提供编辑器。



- [angular-froala](https://github.com/froala/angular-froala) `$ Non-Free` - 为 Froala 所见即所得的HTML富文本编辑器提供 Angular.js 绑定。 ![github star](https://img.shields.io/github/stars/froala/angular-froala.svg?style=social&label=Star)

- [ckeditor4-angular](https://github.com/ckeditor/ckeditor4-angular) - 用于 Angular 2+ 的官方 CKEditor 4 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor4-angular.svg?style=social&label=Star)

- [ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular) - 用于 Angular 2+ 的官方 CKEditor 5 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor5-angular.svg?style=social&label=Star)

- [ngx-summernote](https://github.com/lula/ngx-summernote) - Summernote wysiwyg 编辑器基于 Angular。 ![github star](https://img.shields.io/github/stars/lula/ngx-summernote.svg?style=social&label=Star)

- [jodit-angular](https://github.com/jodit/jodit-angular) - 围绕 Jodit 的 Angular 包装器，使其更容易在 Angular 中使用。 ![github star](https://img.shields.io/github/stars/jodit/jodit-angular.svg?style=social&label=Star)

- [ng-quill](https://github.com/KillerCodeMonkey/ng-quill) - Quill 富文本编辑器的 AngularJS 组件。 ![github star](https://img.shields.io/github/stars/KillerCodeMonkey/ng-quill.svg?style=social&label=Star)

- [ngx-quill](https://github.com/KillerCodeMonkey/ngx-quill) - 一个用于 Quill 富文本编辑器的 Angular（>=2）组件。 ![github star](https://img.shields.io/github/stars/KillerCodeMonkey/ngx-quill.svg?style=social&label=Star)

- [textAngular](https://github.com/textAngular/textAngular) - 为 Angular.js 提供的一个根本性的强大的文本编辑器/Wysiwyg 编辑器。 ![github star](https://img.shields.io/github/stars/textAngular/textAngular.svg?style=social&label=Star)

- [tinymce-angular](https://github.com/tinymce/tinymce-angular) - TinyMCE 的官方 Angular 包装器。 ![github star](https://img.shields.io/github/stars/tinymce/tinymce-angular.svg?style=social&label=Star)

- [ngx-wig](https://github.com/stevermeister/ngx-wig) - Angular WYSIWYG HTML富文本编辑器（灵感来自 AngularJS [ngWig](https://github.com/stevermeister/ngWig)） ![github star](https://img.shields.io/github/stars/stevermeister/ngx-wig.svg?style=social&label=Star)

- [ngx-editor](https://github.com/sibiraj-s/ngx-editor) - 使用 ProseMirror 的 angular 富文本编辑器) ![github star](https://img.shields.io/github/stars/sibiraj-s/ngx-editor.svg?style=social&label=Star)



## 基于 React



为你的基于 React 的项目提供编辑。



- [Alloy Editor](https://github.com/liferay/alloy-editor/) - 基于CKEditor的WYSIWYG编辑器，完全重写了用户视图。 ![github star](https://img.shields.io/github/stars/liferay/alloy-editor.svg?style=social&label=Star)

- [bangle.dev](https://github.com/bangle-io/bangle.dev) - 更高级别的 ProseMirror 组件集合，用于构建富文本编辑器。 ![github star](https://img.shields.io/github/stars/bangle-io/bangle.dev.svg?style=social&label=Star)

- [ckeditor4-react](https://github.com/ckeditor/ckeditor4-react) - 用于 React 的官方 CKEditor 4 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor4-react.svg?style=social&label=Star)

- [ckeditor5-react](https://github.com/ckeditor/ckeditor5-react) - 用于 React 的官方 CKEditor 5 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor5-react.svg?style=social&label=Star)

- [Dante II](https://github.com/michelson/dante2) - 在 draft-js 中完全重写 dante 编辑器。 ![github star](https://img.shields.io/github/stars/michelson/dante2.svg?style=social&label=Star)

- [Draft.js](https://github.com/facebook/draft-js) - 一个 JavaScript 富文本编辑器框架，为 React 而建，由一个不可变的模型支持。 ![github star](https://img.shields.io/github/stars/facebook/draft-js.svg?style=social&label=Star)

- [jodit-react](https://github.com/jodit/jodit-react) - Jodit 编辑器的 React 组件。 ![github star](https://img.shields.io/github/stars/jodit/jodit-react.svg?style=social&label=Star)

- [React Draft Wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - 一个建立在 ReactJS 和 DraftJS 之上的 wysiwyg 编辑器。 ![github star](https://img.shields.io/github/stars/jpuri/react-draft-wysiwyg.svg?style=social&label=Star)

- [react-froala-wysiwyg](https://github.com/froala/react-froala-wysiwyg) `$ Non-Free` - 用于 Froala WYSIWYG HTML 富文本编辑器的 React 组件。 ![github star](https://img.shields.io/github/stars/froala/react-froala-wysiwyg.svg?style=social&label=Star)

- [react-mobiledoc-editor](https://github.com/upworthy/react-mobiledoc-editor) - 一个用 React 和 Mobiledoc-Kit 编写的  Mobiledoc 编辑器。 ![github star](https://img.shields.io/github/stars/upworthy/react-mobiledoc-editor.svg?style=social&label=Star)

- [react-quill](https://github.com/zenoamaro/react-quill) - 一个用于 React 的 Quill 组件。 ![github star](https://img.shields.io/github/stars/zenoamaro/react-quill.svg?style=social&label=Star)

- [react-rte](https://github.com/sstur/react-rte) - 基于 draft-js 的纯 React 富文本 "WYSISYG" 编辑器。 ![github star](https://img.shields.io/github/stars/sstur/react-rte.svg?style=social&label=Star)

- [react-summernote](https://github.com/Vnkitaev/react-summernote) - Summernote（超级简单的 WYSIWYG 编辑器）适应于 React。 ![github star](https://img.shields.io/github/stars/Vnkitaev/react-summernote.svg?style=social&label=Star)

- [react-trix](https://github.com/dstpierre/react-trix) - Basecamp 的 Trix 编辑器的 React 包装器。 ![github star](https://img.shields.io/github/stars/dstpierre/react-trix.svg?style=social&label=Star)

- [Slate JS](https://github.com/ianstormtaylor/slate) - 一个完全可定制的编辑器框架。 ![github star](https://img.shields.io/github/stars/ianstormtaylor/slate.svg?style=social&label=Star)

- [suneditor-react](https://github.com/mkhstar/suneditor-react) - SunEditor 的纯 React 组件（基于纯 javascript 的 WYSIWYG html 编辑器，无依赖性）。 ![github star](https://img.shields.io/github/stars/mkhstar/suneditor-react.svg?style=social&label=Star)

- [tinymce-react](https://github.com/tinymce/tinymce-react) - TinyMCE 的官方 React 包装器。 ![github star](https://img.shields.io/github/stars/tinymce/tinymce-react.svg?style=social&label=Star)



## 基于 Vue



为你的基于 Vue 的项目提供编辑。



- [ckeditor4-vue](https://github.com/ckeditor/ckeditor4-vue) - 用于 Vue.js 的官方 CKEditor 4 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor4-vue.svg?style=social&label=Star)

- [ckeditor5-vue](https://github.com/ckeditor/ckeditor5-vue) - 用于 Vue.js 的官方 CKEditor 5 富文本编辑器组件。 ![github star](https://img.shields.io/github/stars/ckeditor/ckeditor5-vue.svg?style=social&label=Star)

- [vue-froala-wysiwyg](https://github.com/froala/vue-froala-wysiwyg) `$ Non-Free` - Froala WYSIWYG HTML 富文本编辑器的 Vue 组件。 ![github star](https://img.shields.io/github/stars/froala/vue-froala-wysiwyg.svg?style=social&label=Star)

- [vue-html5-editor](https://github.com/PeakTai/vue-html5-editor) - 一个用于 vue 的 html5 wysiwyg 编辑器。 ![github star](https://img.shields.io/github/stars/PeakTai/vue-html5-editor.svg?style=social&label=Star)

- [vue-mobiledoc-editor](https://github.com/alidcastano/vue-mobiledoc-editor) - 一个用于 Vuejs 的 mobiledoc 编辑器组件工具包。 ![github star](https://img.shields.io/github/stars/alidcastano/vue-mobiledoc-editor.svg?style=social&label=Star)

- [vue-wysiwyg](https://github.com/chmln/vue-wysiwyg) - 用于 Vue.js 的轻量级 WYSIWYG 编辑器。 ![github star](https://img.shields.io/github/stars/chmln/vue-wysiwyg.svg?style=social&label=Star)

- [vue-ckeditor5](https://github.com/igorxut/vue-ckeditor5) - CKEditor 5 用于 Vue。 ![github star](https://img.shields.io/github/stars/igorxut/vue-ckeditor5.svg?style=social&label=Star)

- [Vue2Editor](https://github.com/davidroyer/vue2-editor) - 一个使用 Vue.js 和 Quill 的文本编辑器。 ![github star](https://img.shields.io/github/stars/davidroyer/vue2-editor.svg?style=social&label=Star)

- [tinymce-vue](https://github.com/tinymce/tinymce-vue) - Vue 的官方 TinyMCE 包装器。 ![github star](https://img.shields.io/github/stars/tinymce/tinymce-vue.svg?style=social&label=Star)

- [vue-trix](https://github.com/hanhdt/vue-trix) - Vue.js 的简单和轻量级的 Trix 编辑器组件。 ![github star](https://img.shields.io/github/stars/hanhdt/vue-trix.svg?style=social&label=Star)

- [Everright-formEditor](https://github.com/Liberty-liu/Everright-formEditor) - 一个基于Vue3的可视化低代码表单编辑器，通过gui的界面只需简单的操作即可创建出表单，拥有灵活的交互界面，pc端依赖element-plus，mobile依赖vant,内部有一套适配器，适配element和vant的组件。 ![github star](https://img.shields.io/github/stars/Liberty-liu/Everright-formEditor.svg?style=social&label=Star)



## 基于 Ruby



为你的基于 Ruby 的项目提供编辑。



- [bootstrap-wysihtml5-rails](https://github.com/Nerian/bootstrap-wysihtml5-rails) - 用于Bootstrap的所见即所得编辑器，集成在Rails资产管道中。 ![github star](https://img.shields.io/github/stars/Nerian/bootstrap-wysihtml5-rails.svg?style=social&label=Star)

- [bootsy](https://github.com/volmer/bootsy) - 一个漂亮的带有图片上传功能的Rails wysiwyg编辑器。 ![github star](https://img.shields.io/github/stars/volmer/bootsy.svg?style=social&label=Star)

- [ckeditor](https://github.com/galetahub/ckeditor) - 用于Rails的Ckeditor集成 rails。 ![github star](https://img.shields.io/github/stars/galetahub/ckeditor.svg?style=social&label=Star)

- [Mercury Editor](https://github.com/jejacks0n/mercury/) - Mercury编辑器。Rails HTML5 WYSIWYG编辑器。 ![github star](https://img.shields.io/github/stars/jejacks0n/mercury.svg?style=social&label=Star)

- [wysiwyg-rails](https://github.com/froala/wysiwyg-rails) `$ Non-Free` - 用于Froala jQuery WYSIWYG HTML富文本编辑器的Ruby gem。 ![github star](https://img.shields.io/github/stars/froala/wysiwyg-rails.svg?style=social&label=Star)



## 类似 WYSIWYG



类似 WYSIWYG 编辑器



- [EmojiOne Area](https://github.com/mervick/emojionearea) - 用于 jQuery 的类似 WYSIWYG 的 EmojiOne 转换器/选择器插件。 ![github star](https://img.shields.io/github/stars/mervick/emojionearea.svg?style=social&label=Star)

- [GrapesJS](https://github.com/artf/grapesjs) - 一个开源、多用途的 Web Builder 框架。 ![github star](https://img.shields.io/github/stars/artf/grapesjs.svg?style=social&label=Star)

- [last-draft](https://github.com/vacenz/last-draft) - 一个使用 Draft-js-plugins 的 Draft.js 编辑器。 ![github star](https://img.shields.io/github/stars/vacenz/last-draft.svg?style=social&label=Star)

- [Ory editor](https://github.com/ory/editor) - 下一代、高度可定制的浏览器内容编辑器 - 基于 React 和 Redux。 所见即所得的steroids。 ![github star](https://img.shields.io/github/stars/ory/editor.svg?style=social&label=Star)

- [prosemirror](https://github.com/ProseMirror/prosemirror) - ProseMirror所见即所得编辑器。 ![github star](https://img.shields.io/github/stars/ProseMirror/prosemirror.svg?style=social&label=Star)

- [Sir Trevor](https://github.com/madebymany/sir-trevor-js) - 丰富的内容编辑完全是为网络重新设计的。 ![github star](https://img.shields.io/github/stars/madebymany/sir-trevor-js.svg?style=social&label=Star)

- [woofmark](https://github.com/bevacqua/woofmark) - 一个模块化的、渐进的、漂亮的Markdown和HTML编辑器。 ![github star](https://img.shields.io/github/stars/bevacqua/woofmark.svg?style=social&label=Star)

- [ngx-wall](https://github.com/vm-mishchenko/ngx-wall) - 可扩展的基于组件的编辑器，具有漂亮的拖放体验。 ![github star](https://img.shields.io/github/stars/vm-mishchenko/ngx-wall.svg?style=social&label=Star)



## 贡献



欢迎投稿! 请先阅读[贡献指南](contributing.md)。



## 协议



[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](http://creativecommons.org/publicdomain/zero/1.0)



在法律允许的范围内，Jeferson Mari 已经放弃了本作品的所有版权（2021年）和相关或邻接权。