src/app/view/article/article.component.html

@@ -1,6 +1,6 @@
 <div id="main">
 
-    <div id="article-content"></div>
+    <div id="article-content" #divElement></div>
     <ng-template [ngIf]="article">
         <span id="over">over</span>
 

src/app/view/article/article.component.ts

@@ -1,15 +1,14 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ApiService} from '../../api/api.service';
 import {Article} from '../../class/Article';
 import {Title} from '@angular/platform-browser';
 import {User} from '../../class/User';
-import {CommentReq} from '../../class/Comment';
+import {Comment, CommentReq} from '../../class/Comment';
 import {PageList} from '../../class/HttpReqAndResp';
-import {Comment} from '../../class/Comment';
 import {GlobalUserService} from '../../services/global-user.service';
+import VditorPreview from 'vditor/dist/method.min'
 
-declare var editormd;
 declare var $;
 
 @Component({
@@ -40,6 +39,9 @@ export class ArticleComponent implements OnInit {
     avatarImgUrl: string;
     pid: number;
     content: string;
+    @ViewChild('divElement') divElement: ElementRef;
+
+    // private vditor: Vditor;
 
     ngOnInit() {
         this.toArticle(this.articleId);
@@ -55,17 +57,20 @@ export class ArticleComponent implements OnInit {
     }
 
     parseMd(md: string) {
-        editormd.markdownToHTML('article-content', {
+        const option: IPreviewOptions = {
-            markdown: this.article.mdContent,
+            anchor: 2,
-            htmlDecode: 'style,script,iframe',  // you can filter tags decode
+            hljs: {
-            toc: false,
+                lineNumber: true
-            tocm: false,    // Using [TOCM]
+            },
-            // tocContainer: '#article-slider', // 自定义 ToC 容器层
+            markdown: {
-            // tocDropdown: true,
+                autoSpace: true,
-            emoji: true,
+                fixTermTypo: true,
-            taskList: true,
+                chinesePunct: true,
-            flowChart: true,  // 默认不解析
+                toc: true,
-        });
+                linkBase: location.href
+            }
+        };
+        VditorPreview.preview(this.divElement.nativeElement, md);
     }
 
     toArticle(id: number) {