ラボ > Javascript関連：form、HTML：form関連

formのtextareaをhtmlエディターにしたい（WYSIWYG）

WYSIWYGで、よくあるtextareaタグみたいなトコをHTMLで何かする

作成日:2022-02-01, 更新日:2022-02-08

基本

よくあるtextareaタグみたいなトコをHTMLで何かしたい・・・これは「WYSIWYG（ウィジウィグ / What You See Is What You Get）」という仕組み（？）を使うみたい

WYSIWYGを使って何をしたいか？

以前のWordpressや各ブログなどのようにform送信のときのtextareaをHTMLにしたい

考慮: 画像やファイルの対応

画像やファイルを含むHTMLをどうするかが問題。

  • ファイルをどっかにアップして読み込む or BASE64にして埋め込む
  • 画像ファイルのサムネイルはどうする？
  • PDFなどのファイルのサムネイル or アイコン画像はどうする？

BASE64にして埋め込む

  • 画像ファイルへのアクセスが無い分、読み込みが早い
  • ただし、容量が増える

→容量が増えるので、大きい容量の画像やファイルには避けた方が良さげ

ファイルをどっかにアップして読み込む

ファイルをサーバにアップするタイミングをいつにするのか？・・・ってのが面倒そう

  1. 「ファイル管理」の仕組みを別途用意
  2. WYSIWYGでファイルをUPするとき、用意した「ファイル管理」に反映させる
  3. 反映後、URLを返してもらいimgタグにセットして出力
  4. WYSIWYGで作成したHTMLを保存せずに終了したら、ユーザーが「ファイル管理」にアクセスし、不要なファイルを削除する（プログラムでどうにかするのは・・・面倒そう）

BASE64にして埋め込んで、保存時にファイルに書き換える

容量が増えることを考えるとBASE64で保存は避けたい
だからといって「ファイル管理」を用意するのは面倒
→BASE64にして埋め込んで、保存時にファイルに書き換える

  1. WYSIWYGでファイルをUPするときBASE64にしておく
  2. form送信後、サーバ側でBASE64にした部分をファイルにして、リンクなどを書き換える

これだったら「ファイルUP・Form送信しない」って場合、アップされたファイルが残るってコトもなくなって良さげ
大きいサイズのファイルは・・・これで対応できるのかは要検討

ファイルを取り込むメソッド・・・

どのようなやり方をするにしても・・・WYSIWYG上で

  • 「画像ファイルをアップ」というメソッドがあるのか？
  • 「PDFなどのようなファイルをアップ」というメソッドがあるのか？
  • 「動画などのような大容量のファイルをアップ」というメソッドがあるのか？

ってのが問題。各メソッドにあわせて諸々カスタマイズだったり、別途、仕組みを用意する必要があるっぽい

種類

WYSIWYGを実現するにはいくつか種類があるっぽい

QUILL

2022/02/01時点で色々とあさって見た結果・・・
・「QUILL」ってのは人気があるっぽい。無料・商用利用OK。日本語は未対応。

  • ざっくり使ってみたけど・・・
    • 入力されたテキストを取得するとobjectで返ってくる
    • 単純にHTMLを取得したい・・・ってのは「quill.root.innerHTML」で取得
    • 反対にHTMLをセットするにはいったんobject型に変換する必要があるっぽい
    • 「setText()」というメソッドにHTMLを渡せばいけそうな気もするけど・・・未調査
    • 「quill.root.innerHTML」で保存していたデータをセットするにはそのまま出力でOKっぽい
  • 個人的な感想
    • 新規でサービスを構築するなら問題なさそう
    • 既存サービスに追加するなら面倒そう・・・意外に簡単かも？

object: delta

object型は「delta」っていう型になる
これは・・・一般的にある型なのか、QUILLが定義した型なのかは不明

調べてたら「『delta』は『JSON』」っていうような記述を見かけたけど、詳細は知らない

めも

システムで使うには・・・

form送信するとき

入力してもらったHTMLテキストをどうにかして、formの値にセットして渡す必要アリ

  • 「object: delta」のままDBにinsertするなら専用のメソッド(getContents())が用意されているので問題無し
  • HTMLタグの無いテキストでDBにinsertするなら専用のメソッド(getText())が用意されているので問題なし
  • HTMLタグ付きのテキストでDBにinsertするなら「quill.root.innerHTML」で取得

DBからデータを取得し、formにセットする場合

  • 「object: delta」にしてから渡す（メソッド: setContents()）
  • ただのテキストならそのまま渡す（メソッド: setText()）
  • HTMLなら・・・どうすればいいんだろう？

DBから「HTMLのテキスト」の状態で保存したデータを取得し、HTMLとして出力する場合

そのまま出力するだけでOK

<?php echo $contents; ?>

DBから「object: delta」の状態で保存したデータを取得し、HTMLとして出力する場合

「object: delta」をもとにHTMLを作成する必要があるっぽい・・・専用のメソッドがどっかにあるかもしれないけど、見つけれなかった・・・
JSファイルから対象箇所を探し出して、抜き出せば、どうにか出来そうな気もする

もしくは、編集機能を使えないようにしてJSで出力する。
ただこの場合、動的の文書になるんだから・・・SEO的に・・・現在だと気にしなくても良いのかな？

DBに保存したデータ一覧で検索機能が必要なとき

・「object: delta」を格納するカラム
・HTMLのないtextを格納するカラム
の２つを用意し、textのほうでlike検索すればいけそう

※ワカチにするなら・・・MongoDBでゴニョゴニョすれば良いと思うけど、詳細不明

CKEditor

  • いくつかCKEditorについて調べると・・・2020年あたりの情報で「CKEditor 5」。2022/02/01時点でも「CKEditor 5」。公式のBlogを見ると2022年の記事があったのでストップしているわけではないっぽい
  • 公式からソースをダウンロードするときはCookieを受け入れないとダウンロード出来ないっぽい
  • 無料ライセンスの場合、制限があるらしいけど、具体的な制限は不明
  • 画像のアップとかは有料のプラグインを追加 or 自作する必要アリ（※自作してる人がいた→【Laravel】シンプルにCMSを実装する（CKEditor 5））
  • 画像のアップなどのプラグインなどを使うときは、インストール時に設定が必要っぽい（※後で追加インストールとかは無いっぽい・・・詳細不明）
  • 未確認情報・・・無料ライセンスの場合、人数制限がある・・・とか。具体的な金額は分からないけど、有料ライセンスは高い・・・とか。