HTML
<label class="col-md-3 form-control-label" for="name">教程:</label>
<div class="col-md-8">
<script type="text/plain" id="myEditor">
<p>这里我可以写一些输入提示</p>
</script>
</div>
JS
//实例化编辑器
var summernote = $('#myEditor').summernote({
height:250,
minHeight:250,
maxHeight:250,
lang:'zh-CN',
dialogsInBody: true,
focus:true,
callbacks:{
//图片上传
onImageUpload: function(files, editor, $editable) {
sendFile(files[0],editor,$editable);
}
}
});
//上传图片
function sendFile(file, editor, $editable){
var formdata = new FormData();
var fileName = file['name'];
formdata.append("file", file);
$.ajax({
//图片上传出来的url,返回的是图片上传后的路径,http格式
url : "${ctx}/attach/qcloud/file/upload",
type : "POST",
data : formdata,
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(result) {
//url:图片路径 filename:图片名称
$('#myEditor').summernote('insertImage', url, filename);
},
error:function(){
alert("上传失败");
}
});
}
JAVA
public void index() {
UploadFile uploadFile = getFile();
if (uploadFile == null) {
renderJson(RetKit.fail("未选择上传文件!"));
return;
}
if (uploadFile != null) {
//上传文件
Map<String, String> result = storeUploadFile(uploadFile);
//返回
result.put("url", realPath);
renderJson(result);
return;
}
}
问题:The given range isn't in document.

image.png
解决方式:$('#myEditor').summernote({dialogsInBody: true,});
网友评论