说明

最近用angular做后端，需要用到markdown编辑器，网上找了许多，有html的，但是捣鼓了半天发现无法使用NgModel绑定；也有angular写的模块，但是集成到项目后发现不是很漂亮。

后来无意间在博客园中看到了一位网友推荐的markdown，打开后发现完美！漂亮！和我一直喜欢的CSDN的Markdown功能一样，后来才知道CSDN的也是用的该用例。那就是Editor.md编辑器。地址：https://pandao.github.io/editor.md/

大概就是这个样子：

这就是整体效果

我集成的Demo。欢迎star。传送门ngx-editor.md-markdown

（之前忘记把项目地址写上了。啪啪啪打脸中...）

指令结构：

指令结构

详细代码自行查看

使用

找好了要使用的Markdown之后，开始集成到Angular中。于是就写了一个指令。并且支持NgModel

• 使用npm或者yarn安装jquery

  npm install jquery
  或者
  yarn add jquery
  

• 下载editor.md的的文件，并放置到assets文件夹中

• .angular-cli.json中配置editor.md的css和js

  "styles": [
       "assets/editor.md/css/editormd.css",
       "styles.css"
     ],
     "scripts": [
       "../node_modules/jquery/dist/jquery.js",
       "assets/editor.md/editormd.min.js"
     ]
  

• textarea需要用到FromsModule记得添加，另外在module中添加EditorMdDirective指令

• 引入

  Html

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

  Component

  conf = new EditorConfig();
  markdown = '测试语句';
  
  // 同步属性内容
  syncModel(str): void {
       this.markdown = str;
  }
  

以下是效果图：

效果图

详细配置可参考官方Editor.md