因为angular项目需要实现markdown的编辑预览功能,所以在网上查找了下资料,找到了editor.md插件来实现这个功能,经过不断踩坑,总算实现了功能需求。
使用方法如下:
首先我们进到官网:https://pandao.github.io/editor.md/
官网提供了三种下载方式:
但是官网并没有安装教程,网上也只有第一种下载源码的使用方式。
1. 下载源码
2. 将源码解压重命名成editormd并将解压好的源码放在项目的assets文件夹下
3. 在angular.json文件中加载js文件和css文件
{ "projects":{ "client":{ "architect":{ "build":{ "options":{ "styles":{ "./src/assets/editormd/css/editormd.css" } "scripts":{ "./node_modules/jquery/dist/jquery.js", // 注意jQuery要在editormd之前引入 "src/assets/editormd/editormd.min.js" } } } } } } }
4. 在要用到markdown编辑预览的地方引入方法
<div id="my-editormd"> <textarea style="display:none" nz-input [(ngModel)]="xxx"></textarea> </div>
declare var editormd: any; // 在文件头部声明变量,否则在用到editormd的时候会报错undefined // 创建markdow编辑器 public editor = null; this.editor = editormd("my-editormd", { data: '', width: "100%", height: 640, syncScrolling: "single", path: "xxx/assets/editormd/lib/", watch: false, // 关闭双窗口(因为项目需求默认不显示双窗口,只显示预览内容) emoji: true, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true, // 默认不解析SS toolbarIcons: () => { // 这里可以根据自己的需求自定义工具栏 // Or return editormd.toolbarModes[name]; // full, simple, mini // Using "||" set icons align right. return [ "undo", "redo", "|", "bold", "del", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr" ] }, onload: () => { this.editor.previewing(); //预览效果 }, onpreviewing: () => { this.editor.watch(); // 开启实时预览 }, onpreviewed: () => { this.editor.unwatch(); // 关闭实时预览 } });
5. 实现效果
ps:常用函数方法
this.editor.show(); // 显示编辑器 this.editor.hide(); // 隐藏编辑器 this.editor.getMarkdown();// 获取编辑器内容(不含html) this.editor.getHTML(); // 获取编辑器html内容 this.editor.watch; // 开启双窗口对比 this.editor.unwatch(); // 取消双窗口对比 this.editor.previewing(); // 开启预览效果 this.editor.fullscreen(); // 开启全屏(按esc取消) this.editor.showToolbar();// 显示工具栏 this.editor.hideToolbar();// 隐藏工具栏 this.editor.getValue(); // 获取编辑器内容 this.editor.setValue(); // 编辑器赋值 this.editor.remove(); // 移除容器dom
标签:md,markdown,预览,editormd,编辑器,源码,editor,true From: https://www.cnblogs.com/maxiaocang/p/16879803.html