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

wqj97 发布于2019-08-02 12:03 / 3860人阅读

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

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

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

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

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

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

上一篇：使用 Drag and Drop 给Web应用提升交互体验

下一篇：个人简历生成器

相关文章

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

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

xiaoxiaozi 2019-08-26 13:22 评论0 收藏0

基于SpringBoot的仿微信扫描登陆+轻量级富文本编辑->文章系统

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

MyFaith 2019-08-15 12:34 评论0 收藏0

summernote编辑器插件使用笔记

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

printempw 2019-08-19 18:18 评论0 收藏0

手摸手，带你用vue撸后台系列三(实战篇)

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

Channe 2019-08-20 17:15 评论0 收藏0

手摸手，带你用vue撸后台系列三(实战篇)

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

zgbgx 2019-08-29 12:46 评论0 收藏0

发表评论

登陆后可评论

0条评论

wqj97

男|高级讲师

我要关注我要私信

TA的文章
阅读更多

基于LinuxBoot的云固件创新实践_云技术

阅读 2878·2021-10-14 09:42

uniapp 的基础

阅读 950·2021-10-11 10:57

为什么没有 `<style src="">`

阅读 841·2019-08-30 15:54

微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

阅读 1991·2019-08-30 13:50

vertical-align 简明指南

阅读 1753·2019-08-30 11:19

php项目—个人博客

阅读 1045·2019-08-29 12:38

JS错误监控总结

阅读 1514·2019-08-26 11:51

深度理解Promise--Promise的特点和方法详解

阅读 1482·2019-08-26 10:48

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

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

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

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

基于SpringBoot的仿微信扫描登陆+轻量级富文本编辑->文章系统

summernote编辑器插件使用笔记

**手摸手，带你用vue撸后台系列三(实战篇)**

**手摸手，带你用vue撸后台系列三(实战篇)**

发表评论

0条评论

wqj97

男|高级讲师

TA的文章

基于LinuxBoot的云固件创新实践_云技术

uniapp 的基础

为什么没有 `<style src="">`

微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

vertical-align 简明指南

php项目—个人博客

JS错误监控总结

深度理解Promise--Promise的特点和方法详解

最新活动