AngularでFroalaEditorを使う

Angular で WYSIWYGEditor を使うには、個人的には FroalaEditor がおすすめです。 （ただし、powered by や unlisensed 表記を消すにはライセンスを購入する必要があります）

完全無料で運用したい場合は、 カスタマイズ性が高いngx-quillQuill によるリッチテキストエディター実装

あるいは引用ボタンがなく、画像アップロードが REST API でもよい場合はangular-editorがおすすめです。

Froala Editor の使い方

まず、公式ドキュメントに沿って導入します。 AngularFroalaEditor では、options というプロパティを用意し、その中でいろんなことを定義します。option には event というプロパティがあり、様々なイベントの前後で何かを行うことができます。指定された third-party の plugin なども入れられます。 それっぽいものを Options - Froala Events - Froala Plugins - Froala から見つけ出して、入れてみるとできます。

詰まりどころと画像のアップロード

自分自身が詰まったところを共有します。 イベントですが、Events - Froalaの通りに定義すると AngularFroalaEditor では、かなり難しいことになります。

例えば画像のアップロード前のイベントですが、 function (images)というドキュメントの通りだと this の中身が勝手に FroalaEditor 自体にされ、コンポーネントで使用する this が使えなくなってしまいます。 そのため、アロー関数にする必要があります。

events: {
    'image.beforeUpload': (images) => {
      // Do something here.
      console.log(this);
       console.log(images);
    }
  }

しかし、問題があります。画像アップロードイベントでは、FroalaEditor 自体にダウンロード URL を入れ込む必要があるためです。 なので、最初の initialize のイベントのタイミングで変数に FroalaEditor を入れておきます。

    events: {
      initialized: (editor) => {
        this.froalaEditor = editor;
      },

あとは画像を受け取った ‘image.beforeUpload’の中で画像をアップロードし、返ってきた URL を FroalaEditor 自体に入れ込みます。以下の形式で読み込ませると FroalaEditor 内に画像がインサートされます。参考 →How to upload image to firebase storage and render image on editor?

this.froalaEditor._editor.image.insert(
  downloadURL,
  null,
  null,
  this.froalaEditor._editor.image.get()
);