资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）

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

xiaoxiaozi / 1943人阅读

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

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();
            }
          });
        },

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

    混合云 超融合服务器 富文本编辑器 富文本web编辑器 将项目上传到腾讯云服务器 c 附件上传到服务器

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

    转载请注明本文地址：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条评论

    xiaoxiaozi

    男|高级讲师
    我要私信

    TA的文章

    阅读更多

    云社区相关服务

    提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
    最新活动
    阅读需要支付1元查看
    <