Angular8 整合 Editor.md 並解析 Markdown 語法

準備工作

安裝jQuery

使用npm安裝jquery
npm install jquery

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

angular 配置

angular.json中配置editor.md的css和js路徑

"styles": [
              "src/theme.less",
              "src/styles.scss",
              "src/assets/md_editor/css/editormd.css"//editormd用到的css路徑
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",//jquery路徑
              "src/assets/md_editor/js/editormd.min.js",//editormd js路徑
              "src/assets/md_editor/lib/marked.min.js",//解析markdown用到的js路徑
              "src/assets/md_editor/lib/prettify.min.js"//解析markdown用到的js路徑
            ],

建立一個editor配置的配置類editor-config.ts,程式碼如下：

export class EditorConfig {
    public width = '100%';
    public height = '400';
    public path = './assets/md_editor/lib/';
    public codeFold: true;
    public searchReplace = true;
    public toolbar = true;
    public emoji = true;
    public taskList = false;
    public tex = false;// 數學公式類預設不解析
    public readOnly = false;
    public tocm = true;
    public watch = true;
    public previewCodeHighlight = true;
    public saveHTMLToTextarea = true;
    public markdown = '';
    public flowChart = false;//流程圖
    public syncScrolling = true;
    public sequenceDiagram = false;//UML時序圖
    public imageUpload = true;
    public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'];
    public imageUploadURL = '';
    public htmlDecode = 'style,script,iframe';  // you can filter tags decode
    public editorFunction = '';//定義呼叫的方法
    constructor() {
    }
}

component中的使用，程式碼如下：

透過呼叫editormd的方法editormd.markdownToHTML('detailmarkdown', this.conf);其中detailmarkdown,表示你需要對該div下面的textarea裡面的markdown內容進行渲染，如果你不希望直接渲染textarea裡面的markdown，而是傳入你需要渲染的內容，然後給出渲染結果，你可以和我下面程式碼一樣。給配置類裡面的markdown引數賦值this.conf.markdown = this.articleInfo['content']; 這樣他就會渲染你傳給this.conf.markdown這個引數的值，然後把結果append到id為detailmarkdown的元素中

ts程式碼

import { Component, OnInit } from '@angular/core';
import {EditorConfig} from '../../editor/model/editor-config';
import {BlogService} from '../../common-share/api/blog/blog.service';
import {ActivatedRoute} from '@angular/router';
declare var editormd: any;

@Component({
  selector: 'app-article-detail',
  templateUrl: './article-detail.component.html',
  styleUrls: ['./article-detail.component.scss']
})
export class ArticleDetailComponent implements OnInit {
  conf = new EditorConfig();
  id = 0;
  userName = '';
  catalogs = [];
  articleInfo = [];
  catalogName = '';
  constructor(private blogService: BlogService,
              private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
      this.catalogs = JSON.parse(localStorage.getItem('catalogs'));

      this.activatedRoute.params.subscribe((res) => {
          this.id = res.id;
          this.loadArticleDetail();
      });
  }
  loadArticleDetail() {
      this.blogService.getArticleDetail(this.id).subscribe((res) => {
          if (res.code === 0) {
              this.articleInfo = res.data.article;
              this.userName = res.data.username;
              this.conf.markdown = this.articleInfo['content'];
              this.catalogName = this.catalogs[this.articleInfo['type']].name;
              editormd.markdownToHTML('detailmarkdown', this.conf);
          }
      });
  }
}

html程式碼

<div class="detailmarkdown" id="detailmarkdown">
    <textarea style="display: none;" ></textarea>
</div>

原文：http://www.bowen-tech.top/articles/detail/...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

Angular8 整合 Editor.md 並解析 Markdown 語法

準備工作

angular 配置

component中的使用，程式碼如下：

相關文章