说明

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

imlxp / ngx-editor.md-markdown

说明

使用

简介

发行版

贡献者

近期动态

imlxp / ngx-editor.md-markdown .gitee-modal { width: 500px !important; }

说明

使用

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

imlxp / ngx-editor.md-markdown