流行的富文本或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

由Rails作者开发,在Basecamp内部使用,支持图片拖拽。可以将任何文件拖拽进去。

medium-editor

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

支持图片拖拽。

ckeditor

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

TinyMCE

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

textbox

同样出自Tiny Editor Technology,比较强大,但是需要付费使用,商业使用需要付费。Atlassian, Medium, Evernote都使用他们的产品。

summernote

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

ueditor

出自百度,界面美观度不是很理想,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

感觉非常强大。The next-gen Web and EPUB Editor based on the rendering engine of Firefox®。github,也是付费软件。

wysibb

官方文档和界面不吸引人。也是付费软件。

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和codemirror同样出自两个德国人。

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

Resources

相关文章: