summernote

機能: Summernote の画像をサーバーにアップロードし、MutationObserver がサーバー上の画像を削除する機能を書き換えました。

ブログはこちら: http://blog.csdn.net/ccccc_jun/article/details/79159778

1. まず最初に、Summernote リッチ テキスト エディターが何であるかを理解する必要があることを宣言します: https://Summernote.org/

個人的な意見：バックグラウンドでの編集がメインで、公開アカウントで記事を書くときと同様にリッチテキストエディタをベースに書きます。

2. サマーノートを選ぶ理由は何ですか?理由はいくつかあります

(2.1) Summernote はブートストラップ フロントエンド フレームワークをサポートしています: http://www.bootcss.com/。ブートストラップは現在非常に一般的に使用されており、主なハイライトは応答性の高いレイアウトであり、携帯電話 (モバイル デバイス) が優先されます。今日の膨大な携帯電話ユーザーによる閲覧に非常に適しています。そのため、Summernote は携帯電話でのテキスト編集にも非常に適しています。

(2.2) bootstrap には、bootstrap-wysiwyg という独自のリッチ テキスト エディタもありますが、これを使用しないのはなぜでしょうか。理由は、Summernoteは動画を挿入できるからです。しかし、他の多くのリッチ テキスト エディタでもビデオを挿入できますか?他の海外リッチテキストエディタはYouTube動画しか挿入できませんが、SummernoteはTencent動画やYouku動画も挿入できるので、テキスト編集時に動画を挿入する必要がある編集者には非常におすすめです。サマーノート。

(2.3) Summernote は非常にシンプルですが、その機能は非常に充実しています。ツールバーもカスタマイズできます。絵文字も例外ではありません。ただし、Summernote への絵文字の挿入に関する記事のほとんどは絵文字をローカルで読み込むために使用されます。参照: https://github.com/Summernote/awesome-Summernote および https://github.com/nilobarp/Summernote-ext-emojiただし、ローカルで絵文字を読み込むと画像の削除と競合するため、絵文字機能を追加しませんでした。もう 1 つの方法は、ajax を介して api.github.emoji サーバーへのリンクを取得し、そのリンクを介して追加することです。ジュンは本当に使い方が分かりません。

(2.4) Summernote は、HTML の本文コードである Summernote('code') を通じてテキスト ボックスの値を直接取得し、データベースに直接アップロードしたり、バックグラウンドに送信したりすることができます。

3. なぜ onImageUpload を書き直す必要があるのでしょうか?

(3.1) Summernote付属の機能では画像をbase64形式に変換して保存するだけなので、データベースに保存するのは非常に手間がかかり、ランダムな画像だと数MBもかかりすぎるので書き直しました。画像をサーバーに保存してから、サーバー上の画像のアドレスをデータベースにアップロードする方がはるかに優れています。

(3.2) Summernoteでアップロードした画像を書き換えてサーバーに保存しているというのを他のブログでよく見かけますが、コードを貼り付けるだけで忘れてしまうのは残念ですし、しかも基本的には保存されるだけで削除されません。もし画像を間違って挿入しても削除できないのは残念なので、画像のアップロードと削除ができる Summernote バージョンを作成する予定です。実際、アイデアは前回の記事と同じですが、いくつかの場所に注意してください。jQuery の $.ajax() は php のバックグラウンドと対話し、MutationObserver を使用して画像を削除します。

(3.3) ajax の使い方を知っている人なら問題ないはずです。そのため、onImageUpload の書き換えでは、バックグラウンドとの対話にも jQuery の ajax() を使用します。ajax() は File タイプもサポートしているため、対話には FormData タイプが使用されます。

(3.4) 書き換えられるのであれば問題ありません。私は便宜上書き換えませんが、他の種類のバックエンドは 10 行程度のコードで比較的簡単に記述できます。

4. PS: 画像を挿入する際の一般的な問題

(4.1) 比較的大きな画像を挿入するとエラーが発生する場合があります。その理由は主に、画像サイズが許容範囲を超えていることです。この問題は、max_execution_time、post_max_size、upload_max_filesize を変更することで解決できます。 php.ini の問題は解決できますが、これ以上は言いません。他の人の経験を参照してください: http://blog.csdn.net/anan890624/article/details/51859863

(4.2) 2番目の理由もphp.iniファイルにありますが、サイズ制限ではなく、php.iniのupload_tmp_dirにファイルの一時保存ファイルが元々定義されていない可能性がありますので、これを変更する必要があります。これに基づいて変更を加えました。

(4.3) php.ini を変更した後はサーバーを再起動する必要があります。そうしないと、変更してもエラーが発生します。