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>
  

原文：www.bowen-tech.top/articles/de…