全部
技术
PHP
MySQL
前端
Linux
JAVA
工具
纪念日计算器
邮记星
个人记账
笔记侠
历史上的今天
生日密码
生日书
生日密码
生日花语
博古通今
三十六计
鬼谷子
笑林广记
本草纲目
山海经
唐诗宋词
宋词300首
唐诗300首
退出
登录
注册
编辑文章
选择分类
PHP
MySQL
前端
Linux
Java
工具
选择专栏
设计模式
java基础
Angular学习
Java面试题
描述:
Angula8集成Editor.md并解析markdown语法,生成html
封面图上传 :
+
点击上传图片
#### 准备工作 - 安装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
```
保存文章