编辑文章

描述:

封面图上传：

#### 准备工作
- 安装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,代码如下：

``` js
	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代码
	``` js
	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代码
	```html
	<div class="detailmarkdown" id="detailmarkdown">
		<textarea style="display: none;" >

```