实现Markdown显示
-
安装 ngx-markdown
npm install ngx-markdown --save -
再angular.json 中引入对应的css文件和js文件
"styles": [ "src/styles.css", "node_modules/prismjs/themes/prism-okaidia.css", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css", "node_modules/katex/dist/katex.min.css" ], "scripts": [ "node_modules/marked/lib/marked.js", "node_modules/prismjs/prism.js", "node_modules/prismjs/components/prism-csharp.min.js", "node_modules/prismjs/components/prism-css.min.js", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js", "node_modules/prismjs/components/prism-typescript.min.js", "node_modules/emoji-toolkit/lib/js/joypixels.min.js", "node_modules/katex/dist/katex.min.js" ] -
app.module.ts文件
import { NgModule } from '@angular/core'; + import { MarkdownModule } from 'ngx-markdown'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClient, HttpClientModule } from '@angular/common/http'; + import { MdShowComponent } from './md-show/md-show.component'; @NgModule({ declarations: [AppComponent, MdShowComponent], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, + MarkdownModule.forRoot({ loader: HttpClient }), //如果加载md文件，需要添加该行 ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} -
通过如下方式显示code
-
管道
- typescritpMarkdown的值
public typescriptMarkdown = ` \`\`\`typescript import { Component } from '@angular/core'; @Component({ selector: 'markdown-demo', templateUrl: './markdown-demo.component.html', styleUrls: ['./markdown-demo.component.scss'], }) export class MarkdownDemoComponent { public pipeMarkdown = '# Markdown'; } \`\`\``;
- typescritpMarkdown的值
-
页面
<div [innerHTML]="typescriptMarkdown | language: 'typescript' |markdown"></div> -
显示效果
-
Markdown编辑器，angular集成editor
-
下载editor放到asset文件中
https://codeload.github.com/pandao/editor.md/zip/master.zip
-
修改angular.json
"styles": [ "src/styles.css", "node_modules/prismjs/themes/prism-okaidia.css", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css", "node_modules/katex/dist/katex.min.css", "src/assets/md_editor/css/editormd.css", "src/assets/md_editor/lib/codemirror/codemirror.min.css" ], "scripts": [ "node_modules/marked/lib/marked.js", "node_modules/prismjs/prism.js", "node_modules/prismjs/components/prism-csharp.min.js", "node_modules/prismjs/components/prism-css.min.js", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js", "node_modules/prismjs/components/prism-typescript.min.js", "node_modules/emoji-toolkit/lib/js/joypixels.min.js", "node_modules/katex/dist/katex.min.js", "node_modules/jquery/dist/jquery.js", "src/assets/md_editor/lib/flowchart.min.js", "src/assets/md_editor/lib/jquery.flowchart.min.js", "src/assets/md_editor/editormd.min.js", "src/assets/md_editor/lib/codemirror/codemirror.min.js", "src/assets/md_editor/lib/marked.min.js", "src/assets/md_editor/lib/prettify.min.js", "src/assets/md_editor/lib/underscore.min.js", "src/assets/md_editor/lib/raphael.min.js", "src/assets/md_editor/lib/sequence-diagram.min.js" ] -
添加editor的配置文件editor-config.ts editor的配置在该文件中修改
declare var $: any; export class EditorConfig { public path = './assets/md_editor/lib/'; public tocm = true; public tocContainer = ''; public tocDropdown = false; // // public width = '100%'; // public width = '868'; // public height = '558'; // public codeFold = true; // public placeholder = '请输入正文内容'; // 输入提示 // public searchReplace = true; // public toolbar = true; // public emoji = false; // 关闭外部emoji工具 // public taskList = true; // public tex = true; // 数学公式类默认不解析 // public readOnly = false; // public tocm = true; // public watch = false; // 是否右边展示实时预览 // public previewCodeHighlight = true; // public saveHTMLToTextarea = true; // 保存HTML到Textarea中 // public markdown = ''; // public flowChart = true; //流程图 // public syncScrolling = true; // public sequenceDiagram = true; //UML时序图 // public imageUpload = true; // public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp']; // // public crossDomainUpload = true; // // public imageUploadURL = ''; // 上传图片的接口 // // public htmlDecode = 'style,script,iframe'; // // public uploadCallbackURL = "" // public htmlDecode = 'style,script,iframe,sub,sup|on*'; // 开启HTML标签解析，可以过滤html的标签解析,为了安全性，默认不开启 // public toolbarIcons = function () { // // Or return editormd.toolbarModes[name]; // full, simple, mini // // Using "||" set icons align right. // return [ // 'bold', // 'italic', // 'h1', // 'h2', // 'del', // '|', // 'list-ul', // 'list-ol', // 'hr', // 'quote', // 'code-block', // 'table', // 'link', // 'watch', // '|', // 'fullscreen', // 'file', // 'imageUpload', // '|', // 'undo', // 'redo', // ]; // }; // public toolbarIconsClass = { // imageUpload: 'fa-file-image-o', // 指定一个FontAawsome的图标类 // }; // public toolbarIconTexts = { // // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签 // // file: `<div><input type="file" name="file" id="uploadImage" class="inputfile" style="position:absolute;opacity:0;" accept="image/png,image/jpeg,image/gif,image/jpg,image/svg" /> // // <label for="file" style="cursor:pointer;">上传文件</label></div>` // }; // // 自定义工具栏按钮的事件处理 // public toolbarHandlers = { // /** // * @param {Object} cm CodeMirror对象 // * @param {Object} icon 图标按钮jQuery元素对象 // * @param {Object} cursor CodeMirror的光标对象，可获取光标所在行和位置 // * @param {String} selection 编辑器选中的文本 // */ // imageUpload: function (cm: any, icon: any, cursor: any, selection: any) { // // deal upload event // $('#uploadImage').click(); // $('#uploadImage') // .unbind() // .bind('change', (e: any) => { // let fd = new FormData(); // // 添加到fd对象中等待提交 // fd.append('files', e.target['files'][0]); // if (!fd) return; // $.ajax({ // type: 'post', // url: '/api/v1/upload', // data: fd, // cache: false, // contentType: false, // processData: false, // success: (data: any) => { // if (data && data.length > 0) { // // cm.replaceSelection("![](http://10.0.10.7:10020" + data[0] + ")" + selection); // // 生产环境使用相对路径 // cm.replaceSelection('' + selection); // } // }, // }); // }); // console.log('imageUpload =>', icon.html()); // }, // }; // // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标 // public toolbarCustomIcons = { // file: `<input type="file" name="file" id="uploadImage" class="inputfile" style="position:absolute;opacity:0;" accept="image/png,image/jpeg, image/gif,image/jpg,image/svg,image/xbm,image/pgm,image/xpm" /> `, // }; // public lang = { // toolbar: { // imageUpload: '图片上传', // 自定义按钮的提示文本，即title属性 // }, // }; // public editorFunction = ''; //定义调用的方法 public width = '90%'; public height = 720; //toc : false, // diable ToC public tocStartLevel = 2; // Parse beginning of H2, Default value 1 constructor() {} } -
创建editor-md.directive.ts
import {AfterViewInit, Attribute, Directive, EventEmitter, Input, Output} from '@angular/core'; import {EditorConfig} from './model/editor-config'; declare var editormd: any; declare var $: any; @Directive({ selector: '[appEditorMd]' }) export class EditorMdDirective implements AfterViewInit { @Input() editormdConfig: EditorConfig; // 配置选项 @Output() onEditorChange: EventEmitter<string> = new EventEmitter<string>(); // 发射器 editor: any; // editormd编辑器 constructor(@Attribute('id') private id: string) { } ngAfterViewInit(): void { this.editor = editormd(this.id, this.editormdConfig); // 创建编辑器 const out = this.onEditorChange; const textarea = $('#' + this.id + ' :first'); // 获取textarea元素 // 当编辑器内容改变时，触发textarea的change事件 this.editor.on('change', function () { out.emit(textarea.val()); }); } } -
editor.module.ts
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { EditormdRoutingModule } from './editormd-routing.module'; import { EditormdComponent } from './editormd.component'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [EditormdComponent], imports: [CommonModule, EditormdRoutingModule, FormsModule], }) export class EditormdModule {} -
editormd.component.ts
import { Component, OnInit } from '@angular/core'; import { EditorConfig } from '../editor/model/editor-config'; declare var $: any; declare var editormd: any; @Component({ selector: 'app-editormd', templateUrl: './editormd.component.html', styleUrls: ['./editormd.component.css'], }) export class EditormdComponent implements OnInit { constructor() {} ngOnInit(): void {} editor: any; conf = new EditorConfig(); public showInfo: string = ''; //编辑器内容 ngAfterViewInit(): void { this.createEditor(); } createEditor() { this.editor = editormd('markdown', this.conf); // 创建编辑器 // //解决右侧预览偶尔显示不出来的问题(编辑功能下的md) $('#markdown.editormd-preview-container')[0].innerHTML = this.showInfo; // 在没有开预览模式下获取编辑状态下的值 // let iputData = $('#markdown .editormd-markdown-textarea').val(); // 编辑器事件监听 this.editor.on('change', () => { const textarea = $('#editText'); const value = { textarea: textarea.val(), }; this.showInfo = value.textarea; }); } } -
editormd.cmponent.html
<div id="markdown"> <textarea id="editText" style="display: block"></textarea> </div> -
显示效果
