Angular 集成 Editor.md 实现 Markdown 编辑功能

最近，尝试在 Angular 项目中实现 Markdown 编辑功能。在网上搜索了一番之后，决定使用 Editor.md 插件来实现 Markdown 编辑功能。 Editor.md 功能比较丰富，但是文档不是很友好。

示列地址：https://github.com/yifanzheng/ngx-markdown-editor

使用

• 首先，下载 Editor.md 文件，放到 assets 目录下。

• 使用 npm 下载 jquery。

npm install jquery

• 在 angular.json 中配置 Editor.md 的 css 和 js。

"styles": [
  "src/styles.css",
  "src/assets/editor.md/css/editormd.css"

],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "src/assets/editor.md/editormd.js",
  "src/assets/editor.md/lib/marked.min.js",
  "src/assets/editor.md/lib/prettify.min.js",
  "src/assets/editor.md/lib/raphael.min.js",
  "src/assets/editor.md/lib/underscore.min.js"
]

• 配置 Markdown 编辑器

{
    "mode": "gfm",
    "name": "",
    "value": "",
    "theme": "",
    "editorTheme": "eclipse",
    "previewTheme": "",
    "markdown": "",
    "appendMarkdown": "",
    "width": "100%",
    "height": "640",
    "path": "assets/editor.md/lib/",
    "pluginPath": "",
    "delay": 300,
    "autoLoadModules": true,
    "watch": true,
    "placeholder": "Enjoy Markdown! coding now...",
    "gotoLine": true,
    "codeFold": true,
    "autoHeight": false,
    "autoFocus": true,
    "autoCloseTags": true,
    "searchReplace": true,
    "syncScrolling": true,
    "readOnly": false,
    "tabSize": 4,
    "indentUnit": 4,
    "lineNumbers": true,
    "lineWrapping": true,
    "autoCloseBrackets": true,
    "showTrailingSpace": true,
    "matchBrackets": true,
    "indentWithTabs": true,
    "styleSelectedText": true,
    "matchWordHighlight": true,
    "styleActiveLine": true,
    "dialogLockScreen": true,
    "dialogShowMask": true,
    "dialogDraggable": true,
    "dialogMaskBgColor": "#fff",
    "dialogMaskOpacity": 0.1,
    "fontSize": "13px",
    "saveHTMLToTextarea": true,
    "previewCodeHighlight": true,
    "disabledKeyMaps": [],
    "imageUpload": false,
    "imageFormats": [
        "jpg",
        "jpeg",
        "gif",
        "png",
        "bmp",
        "webp"
    ],
    "imageUploadURL": "",
    "crossDomainUpload": false,
    "uploadCallbackURL": "",
    "toc": true,
    "tocm": true,
    "htmlDecode": true,
    "pageBreak": true,
    "atLink": true,
    "emailLink": true,
    "taskList": false,
    "emoji": false,
    "tex": false,
    "flowChart": false,
    "sequenceDiagram": false,
    "toolbar": true,
    "toolbarAutoFixed": true,
    "toolbarIcons": "full",
    "toolbarTitles": {}
}

• 集成到 Angular 项目中。

markdown.component.html

<div id="markdown-editor">
    <textarea style="display:none;" [(ngModel)]="markdownContent"></textarea>
</div>

markdown.component.ts

declare var editormd: any;

@Component({
  selector: 'app-markdown',
  templateUrl: './markdown.component.html',
  styleUrls: ['./markdown.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MarkdownComponent),
      multi: true
    }
  ]
})
export class MarkdownComponent implements OnInit, ControlValueAccessor {

  markdownContent: string;

  // editormd 对象
  private markdownEditor: any;

  private editorDefaultConfig = {
    width: '100%',
    height: '640',
    path: 'assets/editor.md/lib/',
    saveHTMLToTextarea: true
  };

  private onChange = (_: any) => { };
  private onTouched = () => { };

  constructor(
    private markdownService: MarkdownService
  ) { }

  ngOnInit() {
    this.editorStartup();
  }

  writeValue(obj: any): void {
    this.markdownContent = obj;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  private editorStartup(): void {
    this.markdownService.getEditorConfig()
      .subscribe(
        res => {
          const editorConfig = res ? res : this.editorDefaultConfig;
          this.createEditor(editorConfig);
        },
        () => {
          console.warn('Markdown Editor init failed');
        }
      );
  }

  private createEditor(editorConfig: any): void {
    this.markdownEditor = editormd('markdown-editor', editorConfig);
    if (this.markdownEditor) {
      // 注册变更事件
      this.markdownEditor.on('change', () => {
        this.onChange(this.markdownContent);
        // 获取 html 格式的内容
        // console.log(this.markdownEditor.getHTML());
        // 获取 markdown 格式的内容
        // console.log(this.markdownEditor.getMarkdown());
      });
    }
  }
}

app.component.html

<app-markdown [(ngModel)]="text"></app-markdown>

效果图