Mditor 更新啦！

只求極致

[ M ] arkdown + E [ ditor ] = Mditor

Mditor 是一個簡潔、易於集成、方便擴展、指望舒服的編寫 markdown 的編輯器，僅此而已...

支持瀏覽器: chrome/safari/firefox/ie9+

Git Reop: https://github.com/Houfeng/md...

在線體驗

在線 demo

在瀏覽器集成 Mditor

第一步:

引入 Mditor 樣式文件

<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />

引用 Mditor 腳本文件

<script src="your-path/dist/js/mditor.min.js"></script>

固然，也能夠使用 CDN 資源

...
<link rel="stylesheet" href="https://unpkg.com/mditor@1.0.5/dist/css/mditor.min.css" />
...
<script src="https://unpkg.com/mditor@1.0.5/dist/js/mditor.min.js"></script>
...

第二步:

添加 textarea 元素

<textarea name="editor" id="editor"></textarea>

建立 Mditor 實例

var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

//獲取或設置編輯器的值
mditor.on('ready',function(){
  console.log(mditor.value);
  mditor.value = '** hello **';    
});

全部 API 都應在 ready 事件中進行調用

模式控制 API:

//是否打開分屏            
mditor.split = true;    //打開
mditor.split = false;    //關閉

//是否打開預覽            
mditor.preivew = true;    //打開
mditor.preivew = false;    //關閉

//是否全屏            
mditor.fullscreen = true;        //打開    
mditor.fullscreen = false;    //關閉

工具條配置 API

//mditor.toolbar.items 是一個數組，包括全部按鈕的信息
//能夠直接操做 items 以控制工具條

//只保留第一個按鈕
mditor.toolbar.items = mditor.toolbar.items.slice(0,1);
//添加一個按鈕
mditor.toolbar.addItem({...});
//移除一個按鈕
mditor.toolbar.removeItem(name);
//替換一個按鈕
mditor.toolbar.replaceItem(name, {...});
//獲取一個按鈕
mditor.toolbar.getItem(name);

//更改按鈕行爲
//示例，更改「圖片」按鈕配置，其它按鈕是一樣的方法
let btn = mditor.toolbar.getItem('image');
//替換按鈕動做
btn.handler = function(){
  //自定義處理邏輯
  //this 指向當前 mditor 實例
}; 

//還能夠替換其它信息
btn.icon = '...';   //設置按鈕圖標
btn.title = '...';  //投置按鈕標題
btn.control = true; //做爲控制按鈕顯示在右側
btn.key = 'ctrl+d'; //設置按鈕快捷建

文本編輯 API

//編輯器相關 AIP 在 mditor.editor 對象上

//在光標前插入文本
mditor.editor.insertBeforeText('文本');
//在光標後插入文本
mditor.editor.insertAfterText('文本');
//其它，說明待補充
...

在服務器渲染 Markdown

經過 npm 安裝

npm install mditor -save

在服務端解析

var mditor = require("mditor");
var parser = new mditor.Parser();
var html = parser.parse("** Hello mditor! **");

在頁面中展現解析後的內容

...
<!--引用樣式-->
<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />
...
<div class="markdown-body">
<!--這裏是解析後的內容-->
</div>

-end-