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 ,//+ "
" + $("#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>