开源软件名称：

开源软件地址：

开源软件介绍：

说明

This project was generated with Angular CLI version 1.5.0.

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

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

大概就是这个样子：

指令结构：

详细代码自行查看

使用

找好了要使用的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