The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them.
实例化之后,会将'.meditor'选择器对应的所有元素设为HTML5的可编辑器内容,即contenteditable="true",同时给这些元素添加编辑工具栏,当在元素中输入文本再选中一些文本后,就会在所选文本的上方出现行内工具条啦。
title: MediumEditor富文本编辑器介绍与实战 date: 2018-01-26
[MediumEditor]兼容性:
认识
上图展示了
MediumEditor
这款行内工具式编辑器,比较轻量简单,跟传统的菜单式的富文本编辑器使用体验上有很大差异,更试用于一些重内容轻排版的创作平台。支持对文本的加粗、设为标题、设为超链接等基本功能,TA提供很全面的API,来实现对内容的个性化编辑,其强大的扩展性可以很方便的集成你自定义的extensions。使用
MediumEditor
上手使用基本无压力,文档与接口说明(虽然是英文)也很清晰。 近期的项目是基于vuejs框架,下面也就介绍下此款编辑器在实际项目的使用姿势。安装
当然首先记得install下,通过npm:
npm install medium-editor
or 通过bower:bower install medium-editor
实例化
The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them. 实例化之后,会将'.meditor'选择器对应的所有元素设为HTML5的可编辑器内容,即
contenteditable="true"
,同时给这些元素添加编辑工具栏,当在元素中输入文本再选中一些文本后,就会在所选文本的上方出现行内工具条啦。options配置
MediumEditor
的配置项很强大,在 初始化时传入基于自己业务的配置项,基本就能满足常规使用。MediumEditor
完整的option配置项戳我。 下面来解密项目中使用到的一些配置项:重要API
MediumEditor
提供的接口也很全面,能满足常规的开发使用。完整的API可查阅github上的介绍。挑选几个重要的API来介绍下:初始化类
事件类
给目标元素绑定和解绑浏览器事件,内部基于
addEventListener
和removeEventListener
。如:订阅和解除订阅自定义事件,如:
选区类
saveSelection()
保存的选区编辑器功能类
帮助类
serialize():将编辑里的所有内容元素进行序列化,返回json对象
setContent(html, index):设置编辑器内容,传入html结构
扩展功能extension
MediumEditor
内置的插件可查看安装包里的extension目录,包括了超链接、超链接预览、粘贴等等。另外,还有一些自定义的可集成扩展插件,比如图片上传和插入、表格插件、支持markdown的插件等等,只要在初始化的option参数里配置下就可以使用了。如果以上的插件,还不满足你的业务场景,那么就来编写一款自定义的插件吧。
MediumEditor
提供了完备的接口来让开发者自己动手写插件。在实际的业务开发中,内置paste插件无法满足需求,就需要进行二次开发来适用于项目需求了。对于paste扩展,后续再细说。
总结
在项目中实际应用下来,MediumEditor确实是一款非常灵活好用的编辑器,无论是从直接使用还是二次扩展来说,开发体验都很棒!细读一下源码,会对富文本编辑器领域以及如何来设计一款好用的编辑器方面,将会有很大收获。
【参考】
by lzf