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/...

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!