在前臺上傳兩張同樣的Koala.jpg，在文件夾查看，Summernote可以正常使用啦。先上圖再說。
前臺上傳兩張圖
到上傳指定的文件夾中查看
一．前臺
1.引入summernote基本的css，js文件，漢化需要加入語言js文件：summernote.css，summernote.min.js，summernote-zh-CN.min.js
2. html 添加：<input id="MySummernote" class="summernote" >
注意：class必須是summernote！
3.Js初始化：
$(document).ready(function () {
$('.summernote').summernote({#編輯器設置#}
{
//width: 750,
height: 250,
focus: true, {#頁面打開時光標自動進入編輯區#}
lang: 'zh-CN',
toolbar: [{#工具欄加載項設置#}
//字體工具
['fontname', ['fontname']], //字體系列
['style', ['bold', 'italic', 'underline', 'clear']], // 字體粗體、字體斜體、字體下劃線、字體格式清除
['font', ['strikethrough', 'superscript', 'subscript']], //字體劃線、字體上標、字體下標
['fontsize', ['fontsize']], //字體大小
['color', ['color']], //字體顏色
//段落工具
['style', ['style']],//樣式
['para', ['ul', 'ol', 'paragraph']], //無序列表、有序列表、段落對齊方式
['height', ['height']], //行高
//插入工具
['table',['table']], //插入表格
['hr',['hr']],//插入水平線
['link',['link']], //插入鏈接
['picture',['picture']], //插入圖片
['video',['video']], //插入視頻
//其它
['fullscreen',['fullscreen']], //全屏
['codeview',['codeview']], //查看html代碼
['undo',['undo']], //撤銷
['redo',['redo']], //取消撤銷
['help',['help']], //幫助
],
callbacks:{
onImageUpload: function(files) {
SendImg(files);//前臺圖片上傳函數
},
}
}
);
});
4.圖片上傳函數：
function SendImg(files) {
for(var i = 0;i < files.length;i++){
data = new FormData();
data.append("file", files[i]);
url = "/ImgUploads/";
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
dataType : "json",
success: function(result) {// result是返回的值
console.log(result);
$('#content').summernote('insertImage', result.FileUrl, result.FileName);
},
error:function(){
alert("上傳失敗!")
}
});
}
}
二、後臺圖片接收
1.添加url
url(r'^ImgUploads/$', ImgUploads),
2.view裏面寫ImgUploads函數
@csrf_exempt
def ImgUploads(req):
file = req.FILES.get('file') # 獲取文件對象，包括文件名文件大小和文件內容
#print(file)
curttime = time.strftime("%Y-%m-%d")
upload_url = os.path.join(settings.MEDIA_ROOT, 'django-summernote', curttime)
# print(upload_url)
folder = os.path.exists(upload_url)
if not folder:
os.makedirs(upload_url)
print("創建文件夾")
if file:
file_name = file.name
if os.path.exists(os.path.join(upload_url, file_name)):
name, etx = os.path.splitext(file_name)
finally_name = name + "_" + get_random_str() + etx
#print(name, etx, finally_name)
else:
finally_name = file.name
upload_file_to = open(os.path.join(upload_url, finally_name), 'wb+')
for chunk in file.chunks():
upload_file_to.write(chunk)
upload_file_to.close()
file_upload_url = settings.MEDIA_URL + 'django-summernote/' + curttime + '/' + finally_name
# print(file_upload_url)
# 構建返回值
response_data = {}
response_data['FileName'] = file_name
response_data['FileUrl'] = file_upload_url
response_json_data = json.dumps(response_data)
# print(response_data, response_json_data)
return HttpResponse(response_json_data)
else:
return HttpResponse()
4.怕文件重名，寫個隨機函數get_random_str()，也寫在view裏面
def get_random_str():
uuid_val = uuid.uuid4()
uuid_str = str(uuid_val).encode('utf-8')
md5 = hashlib.md5()#md5實例
md5.update(uuid_str)#拿uuid的md5摘要
return md5.hexdigest()#返回固定長度的字符串