官方文档:https://github.com/pandao/editor.md
1.安装
npm install editor.md
bower install editor.md
2.angular配置`
angular.json 中配置 editor.md 的 css 和 js 路径
"styles": [
"src/assets/editor.md/css/editormd.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"src/assets/editor.md/editormd.min.js",
"src/assets/editor.md/lib/marked.min.js",//解析markdown用到的js路径
"src/assets/editor.md/lib/prettify.min.js"//解析markdown用到的js路径
]
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() {
}
}
//获取编辑器内容
var blogcontent = encodeURIComponent(testEditor.getMarkdown());
component:
通过调用 editormd 的方法 editormd.markdownToHTML ('editor', this.conf); 其中 editor, 表示需要对该 div 下面的 textarea 里面的 markdown 内容进行渲染
import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Router } from '@angular/router';
import { _HttpClient } from '@delon/theme';
import {EditorConfig} from '../../../shared/utils/editor-config';
declare var editormd: any;
import * as $ from 'jquery';
@Component({
selector: 'app-license-info',
templateUrl: './license-info.component.html',
})
export class LicenseInfoComponent implements OnInit, AfterViewInit {
conf = new EditorConfig();
editor: any;
markdown = '测试语句';
constructor(
private http: _HttpClient,
private msg: NzMessageService,
private cdr: ChangeDetectorRef,
private router: Router
) {}
ngOnInit() {
editormd.markdownToHTML('editor', this.conf)
}
}
html:
<div id="editor">
<textarea style="display: none;" ></textarea>
</div>