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は誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント