summernote上传图片文章和修改

效果

 

html

<form class="form-horizontal m-t" id="signupForm">
<input class="summernote" id="content" name="content">
<button class="btn btn-primary  pull-right" type="button" onclick="save()">确认发布</button>
</form>

js

//summernote富文本编辑器上传图片函数回调
function loadSummernote() {
    $('#content').summernote({
        height: 200,
        minHeight: 200,
        maxHeight: 200,
        lang: 'zh-CN',
        onImageUpload: function(files, editor, welEditable) {
            uploadSummerPic(files[0], editor, welEditable);
        }
    });
}
//上传图片
function uploadSummerPic(file, editor, welEditable) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        type:"POST",
        url:prefix+"imageUpload",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            var img = data.data.code;
            editor.insertImage(welEditable,img);//回显到框内很重要
        },
        error:function(){
            layer.alert('上传失败!');
            return;
        }
    });
}


//添加文章内容
function save() {
    //参数
    var content = $.trim($('#content').code());//富文本编辑器传值
     var data= {
       content:content,
    };
    if($("#signupForm").valid()){
        $.ajax({
            cache : true,
            type : "POST",
            url : prefix + "saveArticle",
            data : data,
            success : function(data) {
                if (data.retCode == 200) {
                    parent.layer.msg("发布成功",{icon:1});
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                } else {
                    parent.layer.alert(data.message,{icon:2});
                }
            }
        });
    }
}