开源编辑器

其实编辑器技术虽然有一定的技术门槛，但在业界已发展多年，已经是成熟技术了，也产生了很多优秀的编辑器，它们通常都支持可定制、可扩展，代表性的有：

• 文本编辑器

  • CKEditor4 The battle-tested WYSIWYG HTML editor, when you need even more features and legacy compatibility.

  • TinyMCE The world’s most popular JavaScript library for rich text editing.

  • Quill Your powerful, rich text editor.

• 代码编辑器

  • ACE Editor Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

  • CodeMirror It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality.

• 公式编辑器

  • MathQuill MathQuill is a web formula editor designed to make typing math easy and beautiful.

  • MathJax MathJax is an open-source JavaScript display engine for LaTeX, MathML, and
    AsciiMath notation that works in all modern browsers.

• 表格编辑器

  • Handsontable JavaScript Spreadsheet, Most popular component for Enterprises

  • SpreadJS 基于HTML5的JavaScript电子表格和网格功能控件，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发

• 脑图编辑器

  • kityminder-editor 强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。

经过多年的技术积累，再加上浏览器对可视化编辑支持的持续优化，也产生了不少专门用于开发自定义编辑器的优秀框架，典型代表：

• Draft.js Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

• Slate.js A completely customizable framework for building rich text editors.

• CKEdiror5 A set of components enabling you to create any kind of text editing solution.

• ProseMirror A toolkit for building rich-text editors on the web.

实现一个编辑器虽然比实现一个普通 Web 页面复杂点，但基于已有成果，其难度绝对不至于难到一般工程师都搞不定。现有的这些编辑器及其开发框架使得打造一个业务专属的编辑器的成本已经非常低了，内容类产品通常会采用这几种方式来实现自己的编辑器：

• 低成本-基于现有的进行配置和扩展：Wordpress、淘宝论坛就采用了 TinyMCE

• 中等成本-基于框架进行开基于这些编辑器开发框架：云雀、阿里邮箱、阿里笔记采用了这种

• 高成本-全自主研发编辑器：Google Docs 是典型代表，也是业界最好的 Web 编辑器