Django-Summernote使用记录，完整前后台
在前台上传两张同样的Koala.jpg，在文件夹查看，Summernote可以正常使用啦。先上图再说。
前台上传两张图
到上传指定的文件夹中查看
一．前台
1.引入summernote基本的css，js文件，汉化需要加入语言js文件：summernote.css，summernote.min.js，summernote-zh-CN.min.js
2. html 添加：
注意：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()#返回固定长度的字符串