HTML5 WYSIWYGの作成：imageURLをデータベースに保存する必要がありますか？

Question

私は現在、Googleクローズライブラリを使用してHTML5 WYSIWYGを作成しています。画像を追加するために、画像ファイルをテキスト付きのコンテンツ編集可能なフィールドにドラッグアンドドロップするだけです。

だから私はこれらのイメージを格納するための二つの方法があります。

1.がドロップされたファイルからのデータのURLを取得し、IMGタグを作成し、この画像の属性SRCの値とインサートとして取得されたデータのURLを設定しますこのIMGタグをエディタのフィールドに追加します。ユーザーがフォームを送信すると、取得したすべてのHTMLをMySQLデータベースに保存し、後でイメージでテキストをレンダリングできます。

2.削除した画像をサーバーにアップロードし、通常のファイルとして保存します。 次に、サーバーは次のように応答します。 "画像が保存されました。そのURLはhttp://example.com/images/uploaded-image.png"です。 その後、自分のアイテム1と同様の手順を実行します（属性src = "http://example.com/images/uploaded-image.png"のIMGタグを作成し、編集可能なフィールドに挿入します）。

最初の方法負荷データベースよりますそれは、テキストと一緒にデータベースフィールドに画像dataUrlを格納する必要があるため。しかし、画像をより簡単かつ迅速に追加できるようになり、ユーザーの利便性が向上します。

第方法意志負荷データベース以下画像は、（ファイルシステム内に）別々に格納されているが、この方法は、サーバとWYSIWYG内のテキストに追加する各画像にいくつかのプロセッサ時間に多くの要求を必要とするので。また、ユーザーに即時の結果を表示することはないので、ユーザーは自分の画像がアップロードされるのを待つ必要があります。ユーザーの体験を悪化させるものは何ですか。

私はすべての長所と短所を考慮し、私の場合に、より好適である方法を理解する助けが必要です。

Answer 1

別の方法では、画像だけでなく画像とともに1つのファイルに画像を保存することです。 HTMLファイルへのリンクを格納するためにデータベースを使用します。 Nginxをセットアップし、最高のパフォーマンスを得る。 IMHOあなたのアプリケーションがWYSIWYGの場合、編集する前にコンテンツをブラウザに完全に読み込んで配置する必要があります。