准备工作

  • 安装jQuery

    1.   使用npm安装jquery
    2.   npm install jquery

  • 下载editor.md的的文件，并放置到assets文件夹中

angular 配置

  • angular.json中配置editor.md的css和js路径
    1.   "styles": [
    2.                 "src/theme.less",
    3.                 "src/styles.scss",
    4.                 "src/assets/md_editor/css/editormd.css"//editormd用到的css路径
    5.               ],
    6.               "scripts": [
    7.                 "node_modules/jquery/dist/jquery.js",//jquery路径
    8.                 "src/assets/md_editor/js/editormd.min.js",//editormd js路径
    9.                 "src/assets/md_editor/lib/marked.min.js",//解析markdown用到的js路径
    10.                 "src/assets/md_editor/lib/prettify.min.js"//解析markdown用到的js路径
    11.               ],

  • 创建一个editor配置的配置类editor-config.ts,代码如下：

    1.   export class EditorConfig {
    2.       public width = '100%';
    3.       public height = '400';
    4.       public path = './assets/md_editor/lib/';
    5.       public codeFold: true;
    6.       public searchReplace = true;
    7.       public toolbar = true;
    8.       public emoji = true;
    9.       public taskList = false;
    10.       public tex = false;// 数学公式类默认不解析
    11.       public readOnly = false;
    12.       public tocm = true;
    13.       public watch = true;
    14.       public previewCodeHighlight = true;
    15.       public saveHTMLToTextarea = true;
    16.       public markdown = '';
    17.       public flowChart = false;//流程图
    18.       public syncScrolling = true;
    19.       public sequenceDiagram = false;//UML时序图
    20.       public imageUpload = true;
    21.       public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'];
    22.       public imageUploadURL = '';
    23.       public htmlDecode = 'style,script,iframe';  // you can filter tags decode
    24.       public editorFunction = '';//定义调用的方法
    25.       constructor() {
    26.       }
    27.   }

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代码

    1.   import { Component, OnInit } from '@angular/core';
    2.   import {EditorConfig} from '../../editor/model/editor-config';
    3.   import {BlogService} from '../../common-share/api/blog/blog.service';
    4.   import {ActivatedRoute} from '@angular/router';
    5.   declare var editormd: any;
    7.   @Component({
    8.     selector: 'app-article-detail',
    9.     templateUrl: './article-detail.component.html',
    10.     styleUrls: ['./article-detail.component.scss']
    11.   })
    12.   export class ArticleDetailComponent implements OnInit {
    13.     conf = new EditorConfig();
    14.     id = 0;
    15.     userName = '';
    16.     catalogs = [];
    17.     articleInfo = [];
    18.     catalogName = '';
    19.     constructor(private blogService: BlogService,
    20.                 private activatedRoute: ActivatedRoute) { }
    22.     ngOnInit() {
    23.         this.catalogs = JSON.parse(localStorage.getItem('catalogs'));
    25.         this.activatedRoute.params.subscribe((res) => {
    26.             this.id = res.id;
    27.             this.loadArticleDetail();
    28.         });
    29.     }
    30.     loadArticleDetail() {
    31.         this.blogService.getArticleDetail(this.id).subscribe((res) => {
    32.             if (res.code === 0) {
    33.                 this.articleInfo = res.data.article;
    34.                 this.userName = res.data.username;
    35.                 this.conf.markdown = this.articleInfo['content'];
    36.                 this.catalogName = this.catalogs[this.articleInfo['type']].name;
    37.                 editormd.markdownToHTML('detailmarkdown', this.conf);
    38.             }
    39.         });
    40.     }
    41.   }
  • html代码
    1.   <div class="detailmarkdown" id="detailmarkdown">
    2.       <textarea style="display: none;" ></textarea>
    3.   </div>