2018-10-04に更新

Angular2でマークダウンエディタを使うディレクティブ

Angular2で下記のシンプルなマークダウンエディタを動作させるためのディレクティブを作ってみた。

GitHub - nextstepwebs/simplemde-markdown-editor

シンプルとはいえ、プレビューや、全画面表示によるプレビューを見ながらの編集、
ツールバーにカスタムボタンを追加など、結構機能が充実していると思う。
Fork数なども多い。

import { Directive, ElementRef } from '@angular/core';
const SimpleMDE: any = require('simplemde');

@Directive({
  selector: '[appSimplemde]'
})
export class SimplemdeDirective {

  mde: any;

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    this.mde = new SimpleMDE({
      element: this.el.nativeElement,
      renderingConfig: {
        codeSyntaxHighlighting: true,
      },
    });
  }
}
<textarea appSimplemde [(ngModel)]="body" ...></textarea>

ちなみに、下記のngModelを使う方法がディレクティブでも可能なよう。

Angularで自作コンポーネントのngModel双方向バインディング - アルファブレンド プログラミングチップス

上記実装後、下記の行を加えておけば呼び出し元の値が連動する。

    this.mde.codemirror.on('change', () => {
      this.propagateChange(this.mde.value());
    });

既存データの編集機能も必要ならwriteValueも実装したり等。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント