說明

最近用angular做後端，需要用到markdown編輯器，網上找了許多，有html的，但是搗鼓了半天發現無法使用NgModel繫結；也有angular寫的模組，但是整合到專案後發現不是很漂亮。

後來無意間在部落格園中看到了一位網友推薦的markdown，開啟後發現完美！漂亮！和我一直喜歡的CSDN的Markdown功能一樣，後來才知道CSDN的也是用的該用例。那就是Editor.md編輯器。地址：https://pandao.github.io/editor.md/

大概就是這個樣子：

（之前忘記把專案地址寫上了。啪啪啪打臉中…）

指令結構：

詳細程式碼自行檢視

使用

找好了要使用的Markdown之後，開始整合到Angular中。於是就寫了一個指令。並且支援NgModel

• 使用npm或者yarn安裝jquery

  npm install jquery
  或者
  yarn add jquery

• 下載editor.md的的檔案，並放置到assets資料夾中

• .angular-cli.json中配置editor.md的css和js

  "styles": [
      "assets/editor.md/css/editormd.css",
      "styles.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js"
   
  ,
      "assets/editor.md/editormd.min.js"
    ]

• textarea需要用到FromsModule記得新增，另外在module中新增EditorMdDirective指令

• 引入

  Html

  <div id="md" appEditorMd [editormdConfig]="conf" (onEditorChange)="syncModel($event)">
    <textarea style="display: block;" [(ngModel)]="markdown"></textarea>
  </div>

  Component

  conf = new EditorConfig();
  markdown = '測試語句';
  
  // 同步屬性內容
  syncModel(str): void {
      this.markdown = str;
  }

以下是效果圖：