美文网首页
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