美文网首页
Summernote上传图片

Summernote上传图片

作者: xgz_pmx | 来源:发表于2019-02-15 16:52 被阅读0次

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,});

相关文章

网友评论

      本文标题:Summernote上传图片

      本文链接:https://www.haomeiwen.com/subject/wodmeqtx.html