文中採用的是Mditor編輯器

[ M ] arkdown + E [ ditor ] = Mditor Mditor 是一個簡潔、易於整合、方便擴充套件、期望舒服的編寫 markdown 的編輯器，僅此而已... 支援瀏覽器: chrome/safari/firefox/ie9+

引入資原始檔

1. 引入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>
   複製程式碼

   採用上述方式，發現並沒有明顯效果，可能資源資源版本過低。所以推薦下面一種方式。當然也可以將本地資源推送到自己的CDN上使用。

2. 引入本地資源

   <link rel="stylesheet" href="mditor/css/mditor.min.css" />
   <script src="mditor/js/mditor.min.js"></script>
   複製程式碼

   拷貝https://github.com/Houfeng/mditor/tree/master/packages/embed/dist目錄下的資源到本地，打包到mditor目錄下，再進行引用。

   

##引入控制元件 新增textarea元素，並建立Mditor例項

class App extends Component {
  render() {
    return (
      <div>
        <textarea id="md_editor"></textarea>
      </div>
    );
  }

  componentDidMount(){
    var ele_textarea = document.getElementById('md_editor');
    var mditor =  Mditor.fromTextarea(ele_textarea);
  }
}
複製程式碼

預覽效果：

工具欄

mditor.on('ready',function(){
    mditor.toolbar.items.map(item => {
        console.log('key:',item.key, '  name:',item.name)
    })
});
複製程式碼

key: shift+alt+b name: bold key: shift+alt+i name: italic key: shift+alt+e name: underline key: shift+alt+d name: strikethrough key: shift+alt+1 name: header key: shift+alt+q name: quote key: shift+alt+c name: code key: shift+alt+o name: list-ol key: shift+alt+u name: list-ul key: shift+alt+l name: link key: shift+alt+t name: table key: shift+alt+h name: line key: shift+alt+p name: image key: shift+alt+/ name: help key: shift+alt+f name: toggleFullScreen key: shift+alt+v name: togglePreview key: shift+alt+s name: toggleSplit

可以針對工具條中的按鈕進行新增、替換、刪除監聽等操作，具體可參考原文API

Markdown內容解析並顯示

1. 通過npm安裝

   npm install mditor --save
   複製程式碼

     "dependencies": {
       "mditor": "^1.3.3"
     }
   複製程式碼

2. 將markdown內容解析成html程式碼進行展示

```
var mditor = require("mditor");
複製程式碼

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