Angular简单整合editor.md

editor.md是一个开源的markdown编辑器, 其界面美观, 功能强大. 但配置上会有一点坑, 希望通过这篇教程可以快速轻松地将editor.md整合到angular中.

1. 首先, 去GitHub上下载editor.md: https://github.com/pandao/editor.md/releases/

2. 下载完成后将其解压, 然后将解压后得到的文件夹改名为editor.md后放入angular的assets文件夹中。

   之所以要更改文件夹的名称，是因为我一开始配置的时候，将文件夹名改成了自己想要的格式(比如editor-md), 结果就导致后面加载的时候出现了奇奇怪怪的错误, 采取各种办法无法解决. 最终的解决方法居然是该文件夹名. 我不敢保证是自己其它地方配置导致的, 但如果你也遇到了这种情况, 可以考虑下是不是文件名的问题.

3. 下载jquery, 可以自己下载, 并丢到assets的js文件夹中, 也可以通过npm导入依赖, 但如果通过npm导入请注意一会引入jQuery的时候一定要是dist目录下的js文件, 而不是根目录下的

4. 引入js文件: jquery.js, editor.md.js(在editor.md根目录), prettify.min.js, marked.js(这两个都lib目录)

   引入css文件: editormd.css

   

5. 引入指令文件. 根据我对网上各大教程的了解, 通过大佬已经配置好的指令文件来引入editor.md是最简单, 最方便的方式.

   大佬的csdn文章: Angular集成Editor.md的Markdown编辑器，支持NgModel双向绑定

   大佬配置好的指令Gitee: https://gitee.com/imlxp/ngx-editor.md-markdown

   1. 首先将大佬的项目通过gitee下载(clone)下来

   2. 解压

   3. 找到项目中src/app/editor文件夹, 并将editor文件夹拷到你的angular项目的src/app文件夹下

   4. 然后在你的app.module.ts中import大佬的指令 EditorMdDirective , 并添加到declarations中

      要注意的是: 在这一步也要把FormModule导入到项目中

6. 开始使用

   1. 在你想添加editor.md编辑器的component.html中添加如下内容

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

      上述模板中, addEditorMd是大佬的指令, 必须要添加到div上. conf对象是editor.md的配置对象, 一会我们要在component所对应的ts中创建. syncModel函数也要在ts文件中创建, textarea中双向绑定你要显示和编辑的数据.

   2. 在ts文件中添加如下内容

      public syncModel(str): void {
          this.blog_content = str;
        }
      public conf = new EditorConfig();
      

7. 完毕

按照上面的这个步骤, 应该就可以将Angular和editor.md进行整合