Popular WYSIWYG Editors or Rich Text Editors

流行的富文本或WYSIWYG(所见即所得)编辑器

之前做了一款在线文档编辑系统,可以共享。内嵌了markdown编辑器,朋友说markdown不太直观。所以就花一天时间了解了一下WYSIWYG编辑器。

Text is no longer written to be printed. It is written to be rendered on the web—a much richer canvas than paper. Content can be live, interactive, or even collaborative. Only some rich text editors can even support simple media like images and videos; almost none can embed a tweet or interactive graph. Yet this is the direction the web is moving: richer and more interactive. The tools supporting content creation need to consider these use cases. from https://quilljs.com/

编辑器的高级功能点

  • 图片上传。拖拽上传,需要对接图片的存储接口。
  • 协作。编辑权,阅读权,分享权。
  • 视频上传。
  • 跨平台与离线使用。PWA。
  • 美观和用户体验。
  • 导出与渲染。md,html,pdf,word,png
  • 文档导入。
  • 历史版本。
  • 撤销。

这些高级功能,要采用那些,要有一个取舍,例如图片,视频,公式编辑等,力求在当前的场景下保持简单。

一些流行的编辑器

quilljs

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

An API Driven Rich Text Editor 不错,继续关注

trix-editor

Trix-editor is created by Rails’s author and used in Basecamp. Darg and dorp of image is supported, or you can darg any format of file into it. 最大的特点是支持图片拖拽。可以将任何文件拖拽进去。

medium-editor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

支持图片拖拽。

ckeditor

属于商业软件,文档比较全面,界面比tiny差一些。

TinyMCE

见过的做的最好的,收费和开源两种版本。

textbox

Textbox is created by Tiny Editor Technology, its powerful and with plenty of features, Atlassian, Medium, Evernote are based on this, its a commerical software.

summernote

存积大量未处理的issue,文档少。

ueditor

Ueditor is created by Baidu. Its UI and design is older than ten years. 出自百度,界面美观度不是很理想,10年前的UI设计。

draftjs

From Facebook。简洁轻量。 Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

bluegriffon

This is powerful. The next-gen Web and EPUB Editor based on the rendering engine of Firefox®。github,its a commercial sortware.

wysibb

Wysibb is also a commerical software. Its UI and docs are not attracted me. 官方文档和界面不吸引人。也是付费软件。

codemirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

2011开始流行的在线代码编辑器。比较老了,不建议使用,官方正在筹集资金,准备开发version 6。

Prosemirror

An ideal content editor produces structured, semantically meaningful documents, but does so in a way that is easy for users to understand. ProseMirror tries to bridge the gap between Markdown text editing and classical WYSIWYG editors.

It does this by implementing a WYSIWYG-style editing interface for documents more constrained and structured than plain HTML. You can customize the shape and structure of the documents your editor creates, and tailor them to your application’s needs.

Prosemirror and Codemirror are writen by two German. Their UI are not very user friendly, but we can learn its code module design and structure.

感觉操作界面不是很友好。可以学习其模块组织和代码。

Resources