摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。
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方法,因为他会额外的
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 + "
" + "等待上传
" + "取消上传
" + "代码没有写全,只是提供思路。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108687.html
摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。 1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $(#summernote).summernote({ ...
摘要:微信的扫码的登陆是要企业号的,对于一个学生狗哪来企业号,自己有个测试号内心已十分满足。自己决心做一个仿微信扫码登陆,对,你没看错,就是仿,坚信高仿出奇迹。 前言 点击访问项目链接看到慕课网和segmentfault的发表手记和发表文章是Markdown 编辑器,说实话,对于第一次用的我真的很不习惯。不过对于我们代码开发者来写挺好的,也就对我们这些开发者述写自己的代码故事好点而已。这边我...
摘要:由于需要的编辑器功能比较简单,不需要太多复杂功能,所以选择了一款特别轻量的插件,而且后台操作也很简单。关于图片上传提交按键等回调函数也是在中,详见部分。初始化一个编辑器很简单。 这次项目中需要用到编辑器插件,于是上网查了一下。由于需要的编辑器功能比较简单,不需要太多复杂功能,所以选择了一款特别轻量的summernote插件,而且后台操作也很简单。官网:http://summernote...
摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...
摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...
阅读 3150·2021-11-08 13:21
阅读 1175·2021-08-12 13:28
阅读 1380·2019-08-30 14:23
阅读 1893·2019-08-30 11:09
阅读 773·2019-08-29 13:22
阅读 2661·2019-08-29 13:12
阅读 2527·2019-08-26 17:04
阅读 2217·2019-08-26 13:22