前端开发:一款开源且轻量级的行内工具栏编辑器(MediumEditor)

MediumEditor是一个简单的开源（MIT协议）行内编辑器工具栏，支持鼠标选择然后进行编辑，使用简单，是基于JavaScript编写的，不依赖于任何第三方开源库，兼容主流浏览器及IE9，使用contenteditable API可以实现一个富文本编辑器（contenteditable的作用非常强大，可以让div、span、li、table、p等元素设置为可写状态，详情可以自行搜索）。

1、下载及初始化

https://github.com/yabwe/medium-editor

下载完成后把文件放到项目任意位置，在页面中引入js、css文件即可；第三个文件是主题可根据你的需求来定。

然后在body元素中创建一个DOM容器，用于实例化MediumEditor，如<div class="editable"></div>

最后输入如下代码，运行脚本，一个MediumEditor简单初始化就完成了。刷新页面后就能看到效果。

npm安装命令：npm install medium-editor

bower安装命令：bower install medium-editor

2、扩展demo演示

①图像上传

https://github.com/orthes/medium-editor-insert-plugin

②表格编辑

https://github.com/yabwe/medium-editor-tables

③自定义按钮

https://github.com/arcs-/medium-button

④多个占位符（placeholders）

https://github.com/smiled0g/medium-editor-multi-placeholders-plugin

⑤与Handsontable扩展

https://github.com/asselinpaul/medium-editor-handsontable

⑥媒体编辑按钮

https://github.com/orhanveli/medium-editor-embed-button

还有其他的扩展插件我就不一一介绍了，有兴趣的可以前往官网查看详情。

官方网站：

https://yabwe.github.io/medium-editor/

API文档：

https://github.com/yabwe/medium-editor/blob/master/OPTIONS.md

MediumEditor内置多个事件、方法、配置属性，可自定义事件，内置多个主题可选择，能更好的适应你页面的风格，提供插件构建方式，在当前功能不满足你需求的情况下，也能让你轻松写出符合需求的扩展，可以与Angular、React、Django、Aurelia、Meteor等技术进行整合。