资讯专栏INFORMATION COLUMN

summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

xiaoxiaozi / 2134人阅读

摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。

1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)
图片上传官方网址

// onChange callback
$("#summernote").summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log("onChange:", contents, $editable);
    }
  }
});

// summernote.change
$("#summernote").on("summernote.change", function(we, contents, $editable) {
  console.log("summernote"s content is changed.");
})

summernote是一款富文本编辑器,但是他上传的图片的时候,图片会以二进制的形式存入数据库字段中,这时候就很占资源,所以我们希望图片能存入自己的服务器,在字段中就以链接地址的形式存放,这时候就需要在上传图片的时候进行处理,所以callbacks下面的onImageUpload进行图片文件的处理。
示例

//初始化定义
        var _this=this;
        this.curEle=$("#"+this.id);
        var fileUploadBtn=this.template;
        this.curEle.summernote({
          focus: true,
          lang:"zh-CN", //中文说明配置
          placeholder:"请输入内容",
          fontNames: ["宋体","微软雅黑","楷体","黑体","隶书", "Arial", "Arial Black", "Comic Sans MS", "Courier New",
            "Helvetica Neue", "Helvetica", "Impact", "Lucida Grande",
            "Tahoma", "Times New Roman", "Verdana"],
          height:400,
          minHeight:300,
          maxHeight:null,
          toolbar: [
            ["style", ["style"]],
            ["font", ["bold", "italic", "underline", "clear"]],
            ["fontname", ["fontname"]],
            ["color", ["color"]],
            ["para", ["ul", "ol", "paragraph","height"]],
            ["table", ["table"]],
            ["insert", ["fileBtn","media", "link", "picture", "video"]],
            ["view", ["fullscreen"]]
          ],
          buttons: {
            fileBtn: fileUploadBtn
          },
          callbacks: {
            onImageUpload: function (files,editor, $editable) {
              _this.sendFile(files[0]);
            },
            
          }
        })
methods:{
 sendFile(files){
        var _this=this;
        var data = new FormData();
        data.append("file", files);
        $.ajax({
            data : data,
            type : "POST",
            url : SERVICE_URLS.commonUrl.uploadPic.path, //此处为图片上传服务器请求地址,返回的是图片上传后的路径(例如:请求接口为http://120.96.35.20:8090/uploadPic)
            cache : false,
            contentType : false,
            processData : false,
            dataType : "json",
            success: function(data) {//举例data:{data:"http://www.test.com/a.jpg"}
                 _this.curEle.summernote("insertImage", data.data);
            },
            error:function(){
                alert("上传失败");
            }
        });
    },
    template(context){  //此处为自定义附件上传按钮,如果只考虑图片上传请忽略
          let _this=this;
          var ui = $.summernote.ui;
          // create button
          var button = ui.button({
            contents: " 附件",
            tooltip: "文件上传",
            click: function () {
              _this.visibleUpload=true; //控制上传文件界面框可见性
              setTimeout(function(){
                _this.initUploader(); //初始化web uploader插件
              },0)
             
            }
          });
          return button.render();   // return button as jquery object
        }
}

2.自定义创建附件按钮,上传至自己服务器。

首先介绍github上已经存在的附件插件
uploadcare-summernotegithub链接地址

这是Summernote WYSIWYG编辑器的Uploadcare插件。它允许您的用户从本地设备,社交网络,云存储上传文件和图像,而无需处理上传所需的任何后端代码。这句话意味着你上传的文件存储的位置不在你自己的服务器上。
当然插件提供了定制存储,有兴趣的可以自己尝试。综合考虑插件的方法有点繁琐不安全,不如自己写个附件上传按钮。

示例如下
(1)创建自己的附件上传按钮 自定义按钮, 如上template函数所示:


(2)上传附件,此处用百度的web uploader插件,具体代码不在细讲(可看web uploader API)
(3)根据返回的数据,动态创建DOM插入到summerNote编辑器中。
这里重点说一下思路:
1.利用插件将本地文件上传到我们的服务器
2.当上传完成后(uploadFinished),我们可根据成功返回的数据,动态的创建DOM对象。
3.将创建好的DOM对象,再插入到编辑器中
(注意:这里不用insertNode方法,因为他会额外的


标签--具体查看issue,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的node节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。所以尝试换种方法,利用设置code重新置换整个编辑框的内容。)

 initUploader(){
          var _this=this;
          var $list=$("#uploadList");
          var state="pending";
          var $btn=$("#toServerBtn");
          var uploader = WebUploader.create({
            swf: "https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf",
            server: SERVICE_URLS.commonUrl.uploadFile.path,  //自己服务器的文件上传接口
            pick: "#fileUpload",
            resize: false,
            fileNumLimit: 10,
            fileSizeLimit: 10 * 1024 * 1024,
          });
          this.uploader=uploader;
          // 当有文件被添加进队列的时候
          uploader.on( "fileQueued", function( file ) {
            $list.append( "
  • " + "

    " + file.name + "

    " + "
    " + "

    等待上传

    " + "

    取消上传

    " + "
    "+ "
    " + "
    " + "
    "+ "
  • " ); if(file){ _this.ifFileQueue=true; } }); $list.on("click",".stateBox .cancelFile",function(event){ var target=event.target.getAttribute("attr"); uploader.removeFile( target,true ); $("#"+target).remove(); var status=uploader.getStats(); if(status.queueNum==0){ _this.ifFileQueue=false }else{ _this.ifFileQueue=true; } }) uploader.on( "uploadProgress", function( file, percentage ) { var $li = $( "#"+file.id ), $percent = $li.find(".progress .progress-bar"); // 避免重复创建 if ( !$percent.length ) { $percent = $("
    " + "
    " + "
    " + "
    ").appendTo( $li ).find(".progress-bar"); } $li.find("p.uploadState").text("上传中"); $percent.css( "width", percentage * 100 + "%" ); }); uploader.on( "uploadSuccess", function( file,response ) { $( "#"+file.id ).find("p.uploadState").text("已上传"); _this.$set( _this.fileList,_this.fileList.length,response.result[0]) }); uploader.on( "uploadError", function( file ) { $( "#"+file.id ).find("p.uploadState").text("上传出错"); }); uploader.on( "uploadComplete", function( file ) { $( "#"+file.id ).find(".progress").fadeOut(); }); uploader.on("uploadFinished",function(){ //重点在这里 var str=``; for (var i = 0; i < _this.fileList.length; i++) { var item = _this.fileList[i]; str+=`

    ${item.fileName}

    `; } var storageCode=_this.curEle.summernote("code"); _this.curEle.summernote("reset"); var node=$("
    "+storageCode+str+"
    ")[0]; // _this.curEle.summernote("insertNode",node); //此处不用insertNode _this.curEle.summernote("code",node); setTimeout(()=>{ _this.visibleUpload=false; },1000) }); uploader.on( "all", function( type ) { if ( type === "startUpload" ) { state = "uploading"; } else if ( type === "stopUpload" ) { state = "paused"; } else if ( type === "uploadFinished" ) { state = "done"; } if ( state === "uploading" ) { $btn.text("暂停上传"); } else { $btn.text("开始上传"); } }); $btn.on( "click", function() { if ( state === "uploading" ) { uploader.stop(); } else { uploader.upload(); } }); },

    代码没有写全,只是提供思路。

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/108687.html

    相关文章

    • summernote(文本辑器)附件图片上传自己务器vue项目

      摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。 1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $(#summernote).summernote({ ...

      wqj97 评论0 收藏0
    • 基于SpringBoot仿微信扫描登陆+轻量级文本编辑->文章系统

      摘要:微信的扫码的登陆是要企业号的,对于一个学生狗哪来企业号,自己有个测试号内心已十分满足。自己决心做一个仿微信扫码登陆,对,你没看错,就是仿,坚信高仿出奇迹。 前言 点击访问项目链接看到慕课网和segmentfault的发表手记和发表文章是Markdown 编辑器,说实话,对于第一次用的我真的很不习惯。不过对于我们代码开发者来写挺好的,也就对我们这些开发者述写自己的代码故事好点而已。这边我...

      MyFaith 评论0 收藏0
    • summernote辑器插件使用笔记

      摘要:由于需要的编辑器功能比较简单,不需要太多复杂功能,所以选择了一款特别轻量的插件,而且后台操作也很简单。关于图片上传提交按键等回调函数也是在中,详见部分。初始化一个编辑器很简单。 这次项目中需要用到编辑器插件,于是上网查了一下。由于需要的编辑器功能比较简单,不需要太多复杂功能,所以选择了一款特别轻量的summernote插件,而且后台操作也很简单。官网:http://summernote...

      printempw 评论0 收藏0
    • 手摸手,带你用vue撸后台 系列三(实战篇)

      摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...

      Channe 评论0 收藏0
    • 手摸手,带你用vue撸后台 系列三(实战篇)

      摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...

      zgbgx 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <