summernote附件上传及图片上传

1.重写选择文件回调方法
//重写选择文件回调方法
$('.summernote').summernote({
  height: 200,
  lang: 'zh-CN',
  onImageUpload: function onImageUpload(files) {
    var uuid = new UUID().toString();
    var data = new FormData();
    data.append("upfile", files[0]);
    data.append("docid", uuid);
    data.append("businessid", uuid);
    data.append("funcid", "4005");
    data.append("typeno", "400501");
    data.append("wsuser", "0");
    $.kingdom.upload('formNewContent', function(data) {
      if (data.state === 'SUCCESS') {
        $(".summernote").summernote('insertImage', data.server + data.message, 'imageName'); // the insertImage API
        $(".note-image-input").removeAttr("name");
      } else {
        toastr.error(data.msg);
        $(".note-image-input").removeAttr("name");
      }
    });
  },
  onFileUpload: function(files) { //the onFileUpload API
    var uuid = new UUID().toString();
    var data = new FormData();
    data.append("upfile", files[0]);
    data.append("docid", uuid);
    data.append("businessid", uuid);
    data.append("funcid", "4005");
    data.append("typeno", "400501");
    data.append("wsuser", "0");
    $.kingdom.sendFile(data, function(data) {
      if (data.state === 'SUCCESS') {
        toastr.success('上传成功');
        $('.page-common-page .note-link-url').val('/kfat/static/' + data.message);
      } else {
        toastr.error(data.msg);
      }
    });
  }
});
//文件上传方法
$.extend({
  kingdom: {
    upload: function(form_id, cbfunc, type) { //上传
        var options = {
          url: "/doc",
          type: "POST",
          dataType: "json",
          success: function(e) {
            var jsondata = {};
            jsondata = $.extend(e, jsondata);
            if (e.state && e.state == "SUCCESS") {
              jsondata.flag = '1';
              jsondata.msg = '上传成功';
            } else {
              jsondata.flag = '0';
            }
            if (cbfunc) {
              cbfunc(jsondata);
            }
          },
          error: function(e) {
            var jsondata = {};
            if (e.responseText) {
              var jsondata = eval('(' + e.responseText + ')');
              if (jsondata.state && jsondata.state == "SUCCESS") {
                jsondata.flag = '1';
                jsondata.msg = '上传成功';
              } else {
                jsondata.flag = '0';
              }
              if (cbfunc) {
                cbfunc(jsondata);
              }
            } else {

            }
          }
        };
        $("#" + form_id).ajaxSubmit(options);
      } //upload
      ,
    //编辑器上传文件
    sendFile: function(data, cbfunc) {
      $.ajax({
        data: data,
        type: "POST",
        url: "/doc",
        dataType: "json",
        cache: false,
        processData: false,
        contentType: false,
        success: function(e) {
          var jsondata = {};
          jsondata = $.extend(e, jsondata);
          if (e.state && e.state == "SUCCESS") {
            jsondata.flag = '1';
            jsondata.msg = '上传成功';
          } else {
            jsondata.flag = '0';
          }
          if (cbfunc) {
            cbfunc(jsondata);
          }
        },
        error: function(e) {
          var jsondata = {};
          if (e.responseText) {
            var jsondata = eval('(' + e.responseText + ')');
            if (jsondata.state && jsondata.state == "SUCCESS") {
              jsondata.flag = '1';
              jsondata.msg = '上传成功';
            } else {
              jsondata.flag = '0';
            }
            if (cbfunc) {
              cbfunc(jsondata);
            }
          } else {

          }
        }
      });
    },
  }
});
修改summernote插件以应用到所有富文本
















  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 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/[email protected]/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、付费专栏及课程。

余额充值