komura-c.log

komura-cのWeb技術、音、生活のメモの備忘ログ

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());

> 一覧に戻る