angular2 集成 Editor.md

Editor.md 官网链接

下载安装

• github 下载地址
• 使用bower安装

bower install editor.md

引入

将解压后的editor 包放入assets 文件夹中

从官网上可以看到editor.md 的依赖

所以需要在.angular.json 的scripts 配置中引入以下js 文件，还需要jQuery

        "../node_modules/jquery/dist/jquery.min.js",//jquery的路径（开发环境中要去掉这条注释，不然报错）
        "assets/editormd/editormd.min.js",
        "assets/editormd/lib/marked.min.js",
        "assets/editormd/lib/prettify.min.js",
        "assets/editormd/lib/raphael.min.js",
        "assets/editormd/lib/underscore.min.js",
        "assets/editormd/lib/sequence-diagram.min.js",
        "assets/editormd/lib/flowchart.min.js",
        "assets/editormd/lib/jquery.flowchart.min.js"

新建editor.md 的Component

使用cli 构建工具,这里已markdown 命名

ng g c markdown

会自动生成以下几个文件
markdown.component.css (样式，
后缀名取决于 .angular.json 文件中
“defaults”: {
“styleExt”: “css”,
“component”: {}
}
如果将”styleExt”: “css” 改为 “styleExt”: “scss”, cli 默认生成scss 文件，根据需要自行选择
)
markdown.component.html (模板)
markdown.component.spec.ts (测试)
markdown.component.ts (component 主要部分)

Code

这里讲 editor.md 插件做成一个公共的Component，这样做的好处就是可以方便在其他Component 中引入，避免代码重复，这也是angular2 的有点之一吧。
- markdown.component.html

<div id="editormd" (mouseleave)="getData()">
<textarea style="display:none;" required="true" id="editorText" >
</textarea>
</div>

• markdown.component.ts

import { Component, OnInit, Output, Input, EventEmitter, } from '@angular/core';

@Component({
  selector: 'markdown',
  templateUrl: './markdown.component.html',
  styleUrls: ['./markdown.component.css']
})
export class MarkdownComponent implements OnInit {
  public myEditor: any;
  public obj: any;
  @Input() markdown: string;

  constructor() { }
  ngOnInit() {
    let data = this.markdown;
    this.myEditor = editormd("editormd", {
      markdown: data,
      width: "100%",
      height: 640,
      syncScrolling: "single",
      path: "../../assets/editormd/lib/",
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
      imageUploadURL: "api/upload/mdupload?test=dfdf",
      emoji: true,
      taskList: true,
      tex: true,  // 默认不解析
      flowChart: true,  // 默认不解析
      sequenceDiagram: true,  // 默认不解析SS
    });

    //一个小bug 全窗口预览关闭按钮初始化没有隐藏（原因未知），手动隐藏
    $(".editormd-preview-close-btn").hide();
  }

  /**
   * 将子组件获取的内容传输到父组件
   */
  @Output() onChange = new EventEmitter<any>();
  getData() {
    this.onChange.emit(this.myEditor.getMarkdown());
  }

}

具体的配置可以参照官网实例，上面的更加详细。

在其他组件中引入

selector: ‘markdown’
html 中加入selector

    <markdown (onChange)="getData($event)">loading...</markdown>

component 使用getData() 方法获取markdown 输入的值

    //取值
    getData(value) {
        this.dataText = value;
        console.log(this.dataText);
  }

最终的效果