准备工作

  • 安装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;
    6. @Component({
    7. selector: 'app-article-detail',
    8. templateUrl: './article-detail.component.html',
    9. styleUrls: ['./article-detail.component.scss']
    10. })
    11. export class ArticleDetailComponent implements OnInit {
    12. conf = new EditorConfig();
    13. id = 0;
    14. userName = '';
    15. catalogs = [];
    16. articleInfo = [];
    17. catalogName = '';
    18. constructor(private blogService: BlogService,
    19. private activatedRoute: ActivatedRoute) { }
    20. ngOnInit() {
    21. this.catalogs = JSON.parse(localStorage.getItem('catalogs'));
    22. this.activatedRoute.params.subscribe((res) => {
    23. this.id = res.id;
    24. this.loadArticleDetail();
    25. });
    26. }
    27. loadArticleDetail() {
    28. this.blogService.getArticleDetail(this.id).subscribe((res) => {
    29. if (res.code === 0) {
    30. this.articleInfo = res.data.article;
    31. this.userName = res.data.username;
    32. this.conf.markdown = this.articleInfo['content'];
    33. this.catalogName = this.catalogs[this.articleInfo['type']].name;
    34. editormd.markdownToHTML('detailmarkdown', this.conf);
    35. }
    36. });
    37. }
    38. }
  • html代码
    1. <div class="detailmarkdown" id="detailmarkdown">
    2. <textarea style="display: none;" ></textarea>
    3. </div>