富文本编辑器杂谈
在开发内容型网站的时候,少不了要接触富文本编辑器。对开发人员来说,全新开发一个富文本编辑器会耗费大量的时间在细节的调整和坑的处理上。在针对内部用户使用的系统中,普遍采用的方式是接入现成的开源编辑器,做简单的功能配置。而针对面向普通用户的系统,富文本编辑器往往是单独进行设计和开发的。
传统的富文本编辑器
在把一些功能较多,且可以配置功能项的编辑器称为传统编辑器,这类编辑器是最早出现的我们身边的,典型的代表有:百度的 ueditor、 ckeditor 4和 tinymce。
主要特点是功能强大,通常用在一些后台管理系统中。
其他比较推荐的编辑器有:
- https://quilljs.com/
- http://www.wangeditor.com/
- https://summernote.org/
- https://www.froala.com/wysiwyg-editor
- https://textbox.io/
- https://alex-d.github.io/Trumbowyg/
- http://textangular.com/
- http://kindeditor.net/
- http://simditor.tower.im/
传统的富文本编辑器虽然功能强大,但是也会带来一些问题,很多功能日常用不到,妨碍视线等。普遍的做法是通过配置掩藏一些不需要的功能。当然也有重新开发精简版的案例,如 layedit。
面向程序员的markdown编辑器
Markdown 是一种轻量级的标记语言,可以用一些简单语法来表达一些富文本内容。确切的说Markdown是一种语法规则而不是编辑器。markdown主要的优点是针对熟悉语言的用户,输入效率会非常的高,由于使用前需要先学习一下语法规则,使用大部分只有程序员在使用,不太适合普通大众的需求。
虽然Markdown编辑器可提供一些可视化的按钮选择项目,但是接受度目前还不是非常的高。
比较推荐的编辑器有:
- https://github.com/benweet/stackedit
- https://pandao.github.io/editor.md/
- https://github.com/sparksuite/simplemde-markdown-editor
- https://github.com/lepture/editor
- https://github.com/nhnent/tui.editor
悬浮式富文本编辑器
第一次见到悬浮式的富文本编辑器来自于 medium,目前很多的悬浮式编辑器大都参考的是medium。主要特点是简单。
比较推荐的编辑器有:
- https://github.com/sofish/pen
- http://michelson.github.io/Dante/
- https://github.com/jakiestfu/Medium.js
- https://github.com/yabwe/medium-editor
- https://github.com/brijeshb42/medium-draft
- http://editor.ory.am/
- http://getcontenttools.com/
- https://alloyeditor.com/
- https://ckeditor.com/ckeditor-5-builds/
呈现排版编辑器(微信公众号编辑器)
由于微信公众号自带的编辑器功能太弱,很多第三方网站开发了针对微信公众号的排版编辑器。这类编辑器的主要功能是排版。这样的编辑器场景独特,普通的网站一般很少用到。
比较流行的有:
- http://www.135editor.com/
- http://ipaiban.com/bianji.jsp
- http://www.wxeditor.com/
- https://xiumi.us/
- https://editor.wxb.com/
- https://yiban.io/
- https://edit.newrank.cn/
- http://www.xmyeditor.com/
个人比较喜欢的编辑器
在个人看来做的比较好的编辑器有:
- 传统型: 知乎专栏编辑器(功能精简且实用,包括了对公式Tex的支持)
- 悬浮行: medium
- Markdown型: segmentfault的编辑器
关于编辑器是否要支持手机操作,我觉得这是个假议题,手机并不是一个生成力工具,手机上输入文字的速度也非常的低,目前的富文本编辑器大都采用选中设置,在触摸屏的手机上,选中是一个非常繁琐的工作。所以手机端的文本操作只要纯文本即可。如果是针对程序员的站点,可支持markdowm。
The post 富文本编辑器杂谈 appeared first on 标点符.
Related posts: