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

 

posted @ 2023-01-12 17:53  kjcy8  阅读(308)  评论(0编辑  收藏  举报