因為angular專案需要實現markdown的編輯預覽功能，所以在網上查找了下資料，找到了editor.md外掛來實現這個功能，經過不斷踩坑，總算實現了功能需求。

使用方法如下：

首先我們進到官網：https://pandao.github.io/editor.md/

官網提供了三種下載方式：

但是官網並沒有安裝教程，網上也只有第一種下載原始碼的使用方式。

1. 下載原始碼

2. 將原始碼解壓重新命名成editormd並將解壓好的原始碼放在專案的assets資料夾下

3. 在angular.json檔案中載入js檔案和css檔案

{
    "projects":{
        "client":{
            
 
"architect":{
                "build":{
                     "options":{
                        "styles":{
　　　　　　　　　　　　　　　　"./src/assets/editormd/css/editormd.css"
　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　 "scripts":{
　　　　　　　　　　　　　　　　"./node_modules/jquery/dist/jquery.js", // 注意jQuery要在editormd之前引入
　　　　　　　　　　　　　　　　"src/assets/editormd/editormd.min.js"
　　　　　　　　　　　　　　 }
                     }      
                 }
             }    
         }    
     }  
}             
 

4. 在要用到markdown編輯預覽的地方引入方法

<div id="my-editormd">
　　<textarea style="display:none" nz-input [(ngModel)]="xxx"></textarea>
</div>

declare var editormd: any; // 在檔案頭部宣告變數，否則在用到editormd的時候會報錯undefined

// 建立markdow編輯器
public editor = null；
this.editor = editormd("my-editormd", {
　　data: 
 
'',
　　width: "100%",
　　height: 640,
　　syncScrolling: "single",
　　path: "xxx/assets/editormd/lib/",
　　watch: false, // 關閉雙視窗（因為專案需求預設不顯示雙視窗，只顯示預覽內容）
　　emoji: true,
　　taskList: true,
　　tex: true, // 預設不解析
　　flowChart: true, // 預設不解析
　　sequenceDiagram: true, // 預設不解析SS
　　toolbarIcons: () => {  // 這裡可以根據自己的需求自定義工具欄
　　// Or return editormd.toolbarModes[name]; // full, simple, mini
　　// Using "||" set icons align right.
　　　　return [
　　　　"undo", "redo", "|",
　　　　"bold", "del", "italic", "quote", "uppercase", "lowercase", "|",
　　　　"h1", "h2", "h3", "h4", "h5", "h6", "|",
　　　　"list-ul", "list-ol", "hr"
　　　　]
　　},
　　onload: () => {
　　　　this.editor.previewing(); //預覽效果
　　},
　　onpreviewing: () => {
　　　　this.editor.watch(); // 開啟實時預覽
　　},
　　onpreviewed: () => {
　　　　this.editor.unwatch(); // 關閉實時預覽
　　}
});

5. 實現效果

ps：常用函式方法

this.editor.show();       // 顯示編輯器
this.editor.hide();       // 隱藏編輯器
this.editor.getMarkdown();// 獲取編輯器內容（不含html）
this.editor.getHTML();    // 獲取編輯器html內容
this.editor.watch;        // 開啟雙視窗對比
this.editor.unwatch();    // 取消雙視窗對比
this.editor.previewing(); // 開啟預覽效果
this.editor.fullscreen(); // 開啟全屏（按esc取消）
this.editor.showToolbar();// 顯示工具欄
this.editor.hideToolbar();// 隱藏工具欄
this.editor.getValue();   // 獲取編輯器內容
this.editor.setValue();   // 編輯器賦值
this.editor.remove();     // 移除容器dom