前端開發：一款開源且輕量級的行內工具欄編輯器（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等技術進行整合。