AngularJs 12 使用 Editor.md 實現 Markdown 編輯器 並實現前端渲染，並解決 marked is not defined 報錯的問題

參考

1. Markdown轉HTML的顯示處理之自定義 ToC 容器
2. vue使用marked解析markdown文本遇到的坑及解決方法

遇到的問題

接前兩篇文章《AngularJs 12 使用 Editor.md 實現 Markdown 編輯器(修改版)》，《AngularJs 12 使用 Editor.md 並拆分為組件，解決 editormd.setValue 不存在的bug》完美實現后端編輯器的設置編輯器的value以及獲取markdown之后，要做前台渲染markdown。

但是怎么都不能正確渲染，通過查看《vue使用marked解析markdown文本遇到的坑及解決方法》這篇文章才得以解決。

代碼

1. angular.json 引入所有需要的js

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-blog",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "./src/assets/editormd/css/editormd.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "src/assets/editormd/lib/zepto.min.js",
              "src/assets/editormd/lib/marked.min.js",
              "src/assets/editormd/lib/prettify.min.js",
              "src/assets/editormd/lib/raphael.min.js",
              "src/assets/editormd/lib/underscore.min.js",
              "src/assets/editormd/lib/sequence-diagram.min.js",
              "src/assets/editormd/lib/flowchart.min.js",
              "src/assets/editormd/lib/jquery.flowchart.min.js",
              "src/assets/editormd/editormd.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },

2. 組件js代碼 home-article-info/home-article-info.component.ts

import { Component, OnInit } from '@angular/core';
import { HomeArticleService } from '../../../services/home-article.service';
import { Router, ActivatedRoute } from '@angular/router'; //導入router服務
import { ArticleType } from '../../../types/article-type';
import { topFunction } from '../../../../plugin/function';

declare var $: any;
declare var editormd: any;

@Component({
  selector: 'app-home-article-info',
  templateUrl: './home-article-info.component.html',
  styleUrls: ['./home-article-info.component.scss']
})
export class HomeArticleInfoComponent implements OnInit {

  public editormd: any;

  public article?: ArticleType;

  constructor(protected router: Router, private activatedRoute: ActivatedRoute, protected homeArticleService: HomeArticleService) { }

  ngOnInit() {
    // 二級頁面有可能不在頂部，這里返回頂部一下
    topFunction();
    // 獲取數據
    this.onGetArticle();
  }
  /**
   * 加載markdown
   */
  onLoadMarkdown(markdown: string) {
    this.editormd = editormd.markdownToHTML("editormd", {
      markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
      //htmlDecode      : true,       // 開啟 HTML 標簽解析，為了安全性，默認不開啟
      htmlDecode      : "style,script,iframe",  // you can filter tags decode
      //toc             : false,
      tocm            : true,    // Using [TOCM]
      //tocContainer    : "#custom-toc-container", // 自定義 ToC 容器層
      //gfm             : false,
      //tocDropdown     : true,
      // markdownSourceCode : true, // 是否保留 Markdown 源碼，即是否刪除保存源碼的 Textarea 標簽
      emoji           : true,
      taskList        : true,
      tex             : true,  // 默認不解析
      flowChart       : true,  // 默認不解析
      sequenceDiagram : true,  // 默認不解析
  });
  }
  /**
   * 獲取文章列表
   */
  onGetArticle() {
    const id = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.homeArticleService.getArticle(id).then(res => {
      this.article = res.data;
      this.onLoadMarkdown(this.article.content);
    });
  }

}

3. 組件html代碼home-article-info/home-article-info.component.ts

<div class="app-home-article-info">
  <div class="article-info-container">
      <div class="title">
        {{article && article.title}}
      </div>
      <ul class="miscellaneous">
        <li> {{article && article.created_at}}</li>
        <li>by&nbsp;胡思亂想</li>
      </ul>
      <div id="editormd">
     </div>
  </div>
</div>