markdown

angular2 集成 Editor.md：https://blog.csdn.net/qq_16566415/article/details/73741247

"./node_modules/jquery/dist/jquery.min.js",
"src/assets/editormd/editormd.js",
"src/assets/editormd/lib/marked.min.js",
"src/assets/editormd/lib/prettify.min.js",
"src/assets/editormd/lib/raphael.min.js",
"src/assets/editormd/lib/underscore.min.js",
"src/assets/editormd/lib/sequence-diagram.min.js",
"src/assets/editormd/lib/flowchart.min.js",
"src/assets/editormd/lib/jquery.flowchart.min.js"

问题：
沙盒限制，并没法测试是否ok，需要自己测试一下。

项目中使用Editor.md 中的坑：https://blog.csdn.net/Hello_kong/article/details/87369112

Angular集成Editor.md的Markdown编辑器，支持NgModel双向绑定：
https://blog.csdn.net/lxpume/article/details/78967345
其中的例子：https://gitee.com/imlxp/ngx-editor.md-markdown
可以实现，但是没实现预览的效果；且很多参数并没有搞明白。

案例的执行代码：
需要的目录：

css，fonts，images，lib，plugins，editormd.js和min.js，

npm install jquery


ng g d editor/editor-md --spec false
ng g class  editor/model/editor-config --spec false

自己修改一下为简单容易理解的：

<div id="md" (onEditorChange)="syncModel($event)">
  <textarea style="display: block;" [(ngModel)]="markdown"></textarea>
</div>

<button nz-button (click)="getValue();">获取md文件内容</button>
<button nz-button (click)="preview();">预览</button>
<hr>
<h2>Markdown内容:</h2>
<span>{{markdown}}</span>

conf = new EditorConfig();
markdown = '测试语句ksbk';
editor:any;

ngOnInit(){
  console.log("editormd:",editormd);
  console.log("this.editor:",this.editor);
  this.markdown=sessionStorage.getItem("ksItem")||'没有数据';
  this.editor = editormd('md', this.conf); // 创建编辑器 // 返回为undefined，在单独的函数里，那么就是可以取到的。
  let that=this;

 // change事件
  this.editor.on("change",function(){
    console.log("change事件");
    console.log($('#md' +' :first').val());
    that.markdown=$('#md' +' :first').val(); // 有个空格 。
  })
  // editormd.markdownToHTML('md', this.conf); // 这个我没学会用。
}

// mdchange后，执行的事件，同步属性内容
syncModel(str): void {
  this.markdown = str;
}

// 获取值，提交给后端，目前模拟存在session里面
getValue(value){
  console.log("获取的内容：",this.markdown);
  console.log("获取的内容：",typeof this.markdown);
  sessionStorage.setItem("ksItem",this.markdown);
}

// 预览
preview(){
  console.log(this.editor); // 有点异步，直接在OnInit里面不行的。
  this.editor.previewing();
}

注：ngAfterViewInit中去获取 this.editor，能获取到，但是执行： this.editor.previewing();报错。所以只能在函数里写。

参数：

conf = {
  width: "90%",
  height: 440,
  placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字
  path: 'assets/editor.md/lib/',
  theme: "dark",//工具栏主题
  editorTheme: "pastel-on-dark",//编辑主题
  previewTheme: "dark",//预览主题
  toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
    return ["undo", "redo", "|", "bold", "hr",'table']; // full, simple, mini
  },
};

配置工具栏：
参考：https://www.jianshu.com/p/a1f37bcbdf9f

toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
      return editormd.toolbarModes['simple']; // full, simple, mini
    },

// 自定义：
toolbarIcons : function() {
            // Or return editormd.toolbarModes[name]; // full, simple, mini
            // Using "||" set icons align right.
            return ["undo", "redo", "|", "bold", "hr"]
        },

editor.md 常用参数配置和使用方法：https://cloud.tencent.com/developer/article/1417170

直接想预览：

1. previewing方法，然后让“X”隐藏。
2. 使用文档上的方法
   http://editor.md.ipandao.com/examples/index.html 中：非编辑时Markdown转HTML的显示处理，地址：
   http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html
3. 只读模式
   http://editor.md.ipandao.com/examples/index.html 中：自读模式。

其他的markdown插件：

ngx-markdown
ngx-markdown-editor

ngx-markdown：
https://blog.csdn.net/weixin_34061555/article/details/90890802

angular-cli详解：
https://www.jianshu.com/p/00e14635dd48

或者直接参考：写的很详细！
https://cloud.tencent.com/developer/article/1342750