エフェクト画像
序文
私の知る限り、これはブートストラップをベースにしたリッチテキストエディタであり、そのスタイルと画像のアップロード機能が気に入っています。
質問1：
デフォルトの画像アップロードでは、画像をbase64エンコーディングに変換し、バックエンドに送信します。これは明らかに私たちが望んでいることではありません。画像がファイルとして保存するためにバックエンドに送信され、バックエンドが保存されたパスを返すことを願っています。
質問2：
画像が非同期でアップロードされる場合、進行状況は表示されません。動的な画像などの大きな画像をアップロードする場合、ユーザーエクスペリエンスはあまり良くありません。この目的のために、ブートストラップに基づくモーダルボックスプラグインであるBootBox.js（https://www.bootboxjs.cn/）を使用して、アップロードの進行状況バーを表示します。
ピットを踏む
1.ブートストラップ、ブートボックス、summernote関連の依存関係が少し導入されました...
2. SummernoteのAPIはバージョンによって異なる場合があります。ここでは、画像のアップロードを書き換えてアップロードの進行状況バーを表示するためのアイデアのみを提供します。summernoteの特定のAPIについては、公式Webサイトのドキュメントを参照してください。
3.サーバー展開環境でテストします。
（1）画像が間違った位置に挿入されていて、編集ボックスに正常に挿入されていないことがありますが、ローカルテストでは見つかりません。理由は不明です。
（2）プログレスバーがいっぱいになると、しばらくするとプログレスバーダイアログボックスが消えるのはなぜですか？
アップロードの進行状況とは、バックエンドが完全に受信した後にフロントエンドが送信したバイト数を指します。一時ファイルを指定されたディレクトリに移動し、データベースにデータを挿入します。ビジネスレベルでの運用には時間がかかります。したがって、プログレスバーがいっぱいになります。これは、フロントエンドがすべてのバイトを送信したことを意味します。完全な送信と応答の間には時間差があります。応答を受信すると、プログレスバーダイアログボックスが非表示になります。
（3）プログレスバーダイアログボックスが非表示になってからしばらく待ってから編集ボックスに画像を挿入するのはなぜですか？
サマーノートに画像を挿入する操作は非同期です。したがって、画像が挿入されるのを待たずに、プログレスバーダイアログボックスが閉じます。画像を編集ボックスに挿入した後、ネットワークURLに従って画像をロードする必要があります。テストでは、編集ボックスに挿入して表示する前に、画像が完全にロードされていることがわかりました。サーバーの帯域幅が小さい場合（私が使用している学生サーバー）、画像が大きいほど読み込みが遅くなります。
コード
<script>
$(function() {
var $summernote = $('#summernote').summernote({
height: 420,
focus: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
// 复写图片上传方法
onImageUpload: function (files, editor, $editable) {
sendFile(files[0], editor, $editable);
}
});
//ajax上传图片
function sendFile(file, editor, $editable) {
if (file == null) {
// 取消或关闭了文件选择对话框
return;
}
console.log(editor);
console.log($editable);
var val = 0; // 进度。百分比
var totalBytes = file.size; // 文件的总字节数
console.log(totalBytes);
var formData = new FormData();
formData.append("file", file);
// 显示进度对话框
showProgressDialog();
var uploadAjax = $.ajax({
url: "图片上传的接口路径",
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
xhr: function() {
//获取原生的xhr对象
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//添加 progress 事件监听
//console.log(xhr.upload);
xhr.upload.onprogress = function(e) {
// e.loaded 已经加载的字节数
val = (int) (e.loaded / totalBytes * 100);
if (val > 100) {
val = 100;
}
// 更新进度条的进度
$('#progressBar').css({
width: val.toFixed(2) + '%'
});
$('#progressBar').html(val.toFixed(2) + '%');
};
xhr.upload.onabort = function() {
// 取消上传的回调
};
}
return xhr;
},
// ajax请求成功的回调
success: function (data) {
console.log(data);
if (data['result'] === true) {
//console.log($editable);
// 异步将图片插入到编辑框中
editor.insertImage($editable, "__public__/" + data['save_path']);
//$summernote.summernote('insertImage', data['save_path']);
} else {
alert(data['error']);
}
// 关闭对话框
bootbox.hideAll();
}
});
function showProgressDialog() {
var html =
"<div class='progress'><div id='progressBar' class='progress-bar' role='progressbar' style='min-width: 2em;'>" + (val + '%') + "</div></div>";
bootbox.dialog({
title: '正在上传...',
message: html,
size: 'large',
onEscape: false,
backdrop: false,
buttons: {
cancel: {
label: '取消',
className: 'btn btn-outline-danger',
callback: function(){
// 中断ajax请求
if (uploadAjax != null) {
//console.log(uploadAjax);
uploadAjax.abort();
}
// 关闭对话框
bootbox.hideAll();
}
}
}
});
}
}
});
</script>