Summernote 图片上传

Summernote 默认是插入 Base64 格式的图片，图片并没有上传到服务器。

可以通过 API 自行实现，官方文档：https://summernote.org/deep-dive/

 

覆盖 Summernote 图片上传回调函数 onImageUpload：

// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});

// summernote.image.upload
$('#summernote').on('summernote.image.upload', function(we, files) {
  // upload image to server and create imgNode...
  $summernote.summernote('insertNode', imgNode);
});

 

插入图片：

// @param {String} url
// @param {String|Function} filename - optional
$('#summernote').summernote('insertImage', url, filename);

可以通过回调函数设置图片属性

$('#summernote').summernote('insertImage', url, function ($image) {
  $image.css('width', $image.width() / 3);
  $image.attr('data-filename', 'retriever');
});

 

简单实现：

jQuery('.summernote').summernote({
    height: 400,
    lang:   'zh-CN',
    callbacks: {
        onImageUpload: function(files) {
            let formData = new FormData();
                formData.append('file', files[0]);


            jQuery.ajax({
                url: '/upload/',  // 上传接口
                type: 'POST',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(res) {
                    jQuery('.summernote').summernote('insertImage', res.src);
                },
                error: function(res) {
                    // 后台用的 layui
                    layer.msg(res.responseJSON.msg);
                }
            });
        }
    },
});

 

 

参考：

https://www.php1.cn/detail/RuHeShiYong_Chro_5770c1ca.html