summernote上传图片解决默认设置上传缓慢问题

  1. //富文本编辑器  
  2.     $('#summernote').summernote({   
  3.         lang: 'zh-CN',  
  4.         focus:true,  
  5.         toolbar: [  
  6.             ['style', ['bold''italic''underline''clear']],  
  7.             ['fontsize', ['fontsize']],  
  8.             ['color', ['color']],  
  9.             ['para', ['ul''ol''paragraph']],  
  10.             ['height', ['height']],  
  11.             ['insert', ['picture''video']]  
  12.         ],  
  13.         callbacks: {  
  14.             onImageUpload: function(files, editor, $editable) {  
  15.                 sendFile(files);  
  16.             }  
  17.         }  
  18.     }); 


summernote默认设置是以base64编码的形式传到后台的,这样就占资源,加载时速度又缓慢。我们可以采用将图片直接存到服务器某一路径下,直接加载这一路径。

  1. function sendFile(files, editor, $editable) {  
  2.         var data = new FormData();  
  3.         data.append("ajaxTaskFile", files[0]);  
  4.         $.ajax({  
  5.             data : data,  
  6.             type : "POST",  
  7.             url : Url//图片上传出来的url,返回的是图片上传后的路径,http格式  
  8.             cache : false,  
  9.             contentType : false,  
  10.             processData : false,  
  11.             dataType : "json",  
  12.             success: function(res) {//res是返回的hash,key之类的值,key是定义的文件名  
  13.                 $('#summernote').summernote('insertImage', res);  
  14.             },  
  15.             error:function(){  
  16.                 alert("上传失败");  
  17.             }  
  18.         });  
  19.     }  

可以使用 summernote 的图片上传功能来实现上传图片的功能。具体步骤如下: 1. 在 HTML 文件中引入 summernote 的 CSS 和 JS 文件。 2. 在 HTML 文件中添加一个 textarea 元素,并将其转换为 summernote 编辑器。 3. 在 JS 文件中配置 summernote 编辑器的图片上传功能。可以使用 AJAX 技术将图片上传到服务器,并将上传成功后的图片 URL 返回给 summernote 编辑器。 以下是一个简单的示例代码: HTML 文件: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Summernote Upload Image</title> <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet"> </head> <body> <textarea id="summernote"></textarea> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script> <script src="upload.js"></script> </body> </html> ``` JS 文件(upload.js): ```javascript $(document).ready(function() { $('#summernote').summernote({ height: 300, callbacks: { onImageUpload: function(files) { var formData = new FormData(); formData.append('file', files[0]); $.ajax({ url: '/upload', method: 'POST', data: formData, processData: false, contentType: false, success: function(response) { $('#summernote').summernote('insertImage', response.url); }, error: function(jqXHR, textStatus, errorThrown) { console.error(textStatus + " " + errorThrown); } }); } } }); }); ``` 在上面的代码中,我们使用了 jQuery 和 summernote 的库文件,并在 JS 文件中配置了 summernote 编辑器的图片上传功能。具体来说,我们在 `onImageUpload` 回调函数中使用 AJAX 技术将图片上传到服务器,并将上传成功后的图片 URL 返回给 summernote 编辑器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值