angular项目使用editor.md实现markdown编辑预览功能

因为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