器→工具, 开源项目, 术→技巧, 研发

富文本编辑器的不同流派

钱魏Way · · 1,354 次浏览

在开发内容型网站的时候,少不了要接触富文本编辑器。对开发人员来说,全新开发一个富文本编辑器会耗费大量的时间在细节的调整和坑的处理上。在针对内部用户使用的系统中,普遍采用的方式是接入现成的开源编辑器,做简单的功能配置。而针对面向普通用户的系统,富文本编辑器往往是单独进行设计和开发的。

传统的富文本编辑器

这里把一些功能较多,且可以配置功能项的编辑器称为传统编辑器,这类编辑器是最早出现的我们身边的,典型的代表有:百度ueditorCKEditor(备注:CKEditor 5支持不同类型的编辑器)和tinymce

主要特点是功能强大,通常用在一些后台管理系统中。

同类型的其他编辑器:

  • wangEditor:轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。
  • Kindeditor:历史悠久,用户数也不少,国内某公司出品。免费开源。界面类似于office word,界面和功能中规中矩,文档齐全,使用还算方便。
  • Simditor: Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。虽然是国内出品,但文档是英文的。开源免费。
  • SummerNote:一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。Summernote开源免费,该项目一直比较活跃,一直都有人在维护。依赖于jquery和bootstrap,使用前先引入这两项。
  • Froala:一款功能丰富的富文本编辑器,界面分类清晰,容易集成,容易升级,支持主流浏览器,具有行内编辑功能。Froala代码示例很多,可以集成在很多js框架里如js,Aurelia,Angular,Ionic,Django等。插件很多,易于扩充功能。Froala是收费的,不过前端是开源的,如果要使用后台是要交费的。目前有三个定价方式:基础版(239美元)、专业版(1199美元)和企业版(1999美元)。
  • Quill:轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。开源免费,项目活跃,一直有人维护。
  • Trumbowyg:一个轻量,可定制的 jQuery 所见即所得(WYSIWYG)的编辑器插件,可生成语义化代码,带有功能强大的 API 。编辑器和生成的代码进行了优化以支持 HTML5。
  • Trix:Trix是来自Basecamp的开源项目,Basecamp是Ruby on Rails的创建者。
  • textAngular:基于Angular开发的编辑器
  • Slate 并非一个编辑器应用,而是一套在 React 和 Immutable 的坚实基础上,用于操作富文本数据的强大框架。

传统的富文本编辑器虽然功能强大,但是也会带来一些问题,很多功能日常用不到,妨碍视线等。普遍的做法是通过配置掩藏一些不需要的功能。当然也有重新开发精简版的案例,如layedit

面向程序员的markdown编辑器

Markdown 是一种轻量级的标记语言,可以用一些简单语法来表达一些富文本内容。确切的说Markdown是一种语法规则而不是编辑器。markdown主要的优点是针对熟悉语言的用户,输入效率会非常的高,由于使用前需要先学习一下语法规则,使用大部分只有程序员在使用,不太适合普通大众的需求。

虽然Markdown编辑器可提供一些可视化的按钮选择项目,但是接受度目前还不是非常的高。

比较推荐的编辑器有:

  • StackEdit:一款基于 Web 技术开发的 Markdown 编辑器,它可以将编辑的文档发布到 Blogger、Wordpress,也可以与 Dropbox、Github、Google Drive 同步。
  • Editor.md:一个可嵌入的开源 Markdown 在线编辑器组件,你可以很方便用在浏览器、NW.js(Node-webkit)等地方,基于CodeMirror、jQuery 和 Marked 构建。
  • SimpleMDE:一个嵌入式 JavaScript 编辑器,用于书写好看且易懂的 markdown格式文本。不是双列显示。
  • editor:支持 CommonMark 与 GFM(GitHub Flavored Markdown)两种标准,持丰富的扩展插件,如颜色选择器、图表、UML、表格合并

悬浮式富文本编辑器

第一次见到悬浮式的富文本编辑器来自于medium,目前很多的悬浮式编辑器大都参考的是medium。主要特点是简单。

比较推荐的编辑器有:

排版呈现编辑器(微信公众号编辑器)

由于微信公众号自带的编辑器功能太弱,很多第三方网站开发了针对微信公众号的排版编辑器。这类编辑器的主要功能是排版。这样的编辑器场景独特,普通的网站一般很少用到。

比较流行的有:

个人比较喜欢的编辑器

在个人看来做的比较好的编辑器有:

  • 传统型:知乎专栏编辑器(功能精简且实用,包括了对公式Tex的支持)
  • 悬浮行:Medium
  • Markdown型:segmentfault的编辑器

关于编辑器是否要支持手机操作,我觉得这是个假议题,手机并不是一个生成力工具,手机上输入文字的速度也非常的低,目前的富文本编辑器大都采用选中设置,在触摸屏的手机上,选中是一个非常繁琐的工作。所以手机端的文本操作只要纯文本即可。如果是针对程序员的站点,可支持markdowm。

One Reply to “富文本编辑器的不同流派”

回复 欧锦赛 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注