私は現在、Google Closure Library を使用して HTML5 WYSIWYG を作成しています。ユーザーは、画像ファイルを contenteditable フィールドにテキストでドラッグ アンド ドロップして画像を追加できます。
したがって、これらの画像を保存する方法は 2 つあります。
1.ドロップされたファイルからデータ URL を取得し、IMG タグを作成し、取得したデータ URL をこの画像の属性 SRC の値として設定し、この IMG タグをエディターのフィールドに挿入します。ユーザーがフォームを送信すると、取得したすべての HTML が MySQL データベースに保存され、後で画像付きのテキストをレンダリングできるようになります。
2.ドロップした画像をサーバーにアップロードし、通常のファイルとして保存します。サーバーは次のように応答します:「画像が保存されました。その URL はhttp://example.com/images/uploaded-image.pngです」。その後、項目 1 と同様の手順を実行します (属性 src="http://example.com/images/uploaded-image.png" を持つ IMG タグを作成し、編集可能なフィールドに挿入します)。
最初の方法では、画像 dataUrl をテキストと共にデータベース フィールドに格納する必要があるため、データベースの負荷が高くなります。ただし、画像の追加がより簡単かつ迅速になるため、ユーザー エクスペリエンスが向上します。
2 番目の方法では、画像が (ファイル システムに) 個別に保存されるため、データベースへの負荷は少なくなりますが、サーバーへの要求が多くなり、各画像が WYSIWYG 内のテキストに追加されるたびにプロセッサ時間が必要になります。また、ユーザーにすぐに結果が表示されないため、ユーザーは画像がアップロードされるまで待つ必要があり、ユーザー エクスペリエンスが悪化します。
すべての長所と短所を考慮して、私の場合、どちらの方法がより好ましいかを理解するための助けが必要です.