图片上传完成后summernote编辑器不显示图片
Posted
技术标签:
【中文标题】图片上传完成后summernote编辑器不显示图片【英文标题】：summernote editor does not show up image after image upload complete 【发布时间】：2015-12-07 17:52:32 【问题描述】：我的 html 代码如下
<script language="javascript">
function getCookie(name)
var cookieValue = null;
if (document.cookie && document.cookie != '')
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++)
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '='))
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
return cookieValue;
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method)
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
$.ajaxSetup(
beforeSend: function(xhr, settings)
if (!csrfSafeMethod(settings.type) && !this.crossDomain)
xhr.setRequestHeader("X-CSRFToken", csrftoken);
);
$(document).ready(function()
$('#summernote').summernote(
lang: 'ko-KR',
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
onImageUpload: function(files, editor, welEditable)
sendFile(files[0],editor,welEditable);
,
);
function sendFile(file,editor,welEditable)
data = new FormData();
data.append("file", file);
$.ajax(
url: '/upload/upload',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data)
console.log(data)
//editor.insertImage(welEditable, data);
$('.summernote').summernote("insertImage", data, 'filename');
,
error: function(jqXHR, textStatus, errorThrown)
console.log(textStatus+' '+errorThrown);
);
);
</head>
<body>
<div id="summernote">Hello Summernote</div>
</body>
</html>
我的服务器端 django 视图如下：
def save(request):
if request.method == 'POST':
if 'file' in request.FILES:
file = request.FILES['file']
filename = file._name
fp = open('%s/%s' %(UPLOAD_DIR, filename), 'wb')
for chunk in file.chunks():
fp.write(chunk)
fp.close()
return HttpResponse('http://localhost:8000/static/upload_storage/'+filename)
return HttpResponse('Failed to uploading.')
在我选择要上传的文件并上传完成后，没有图像。但在服务器端存储中，有我发送文件的图像。
【问题讨论】：
$('#summernote').summernote("insertImage", data, 'filename'); 【参考方案1】：您的上传代码似乎没有问题。但最新的summernote 调用自定义OnImageUpload 函数，只有files 参数，而不是三个。
请检查浏览器控制台日志中的错误。
见： https://github.com/summernote/summernote/blob/v0.6.16/src/js/EventHandler.js#L117
请参考javascript code of django-summernote。
【讨论】：
以上是关于图片上传完成后summernote编辑器不显示图片的主要内容，如果未能解决你的问题，请参考以下文章