7b2柒比贰主题增强美化编辑器添加自定义功能按钮_增加回复可见标签插入按钮

效果如图，功能类似开始隐藏和结束隐藏。名称暂定为开始回见，结束回见，意思为回复可见。如果你有更好的名字，可以留言告诉我。有了这个教程，你就可以随意的添加功能按钮，简化自己的操作。

因为教程的复杂性，我直接贴出整张代码，直接全部替换就行了 有时间再做详细的教程

', {},true); }, hideStart:function(){ var range = this.editor.getSelection(true); this.editor.insertText(range.index, '[/reply]', {},true); }, hidereplyStart:function(){ var range = this.editor.getSelection(true); this.editor.insertText(range.index, '[reply]'; if(type != 'hide'){ start = ''; end = ''; } var shortCode = start+''+end; if(this.fileData.type == 'netdisc'){ shortCode = start+''+end; }else if(this.fileData.type == 'local'){ shortCode = start+''+end; } var range = this.editor.getSelection(true); this.editor.insertText(range.index, shortCode, {},true); this.showMediaForm = false; this.fileData.link = ''; this.fileData.name = ''; this.fileData.pass = ''; this.fileData.code = ''; this.fileData.url = ''; }, updatefile:function(event){ var file = event.target.files[0], that = this; if(!file) return; if(this.uploadLocked == true) return; this.uploadLocked = true; this.uploadError = ''; var formData = new FormData(); formData.append('file',file,file.name); formData.append("security", this.nonce); formData.append("user_id", zrz_script.current_user); formData.append("type", 'file'); var config = { onUploadProgress: function(progressEvent){ var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'; that.progress = complete; } } axios.post(zrz_script.ajax_url+'zrz_media_upload',formData,config).then(function(resout){ if(resout.data.status == 200){ that.fileData.link = resout.data.Turl; that.filesArg.push(resout.data.imgdata); }else{ that.uploadError = resout.data.msg; }; that.uploadLocked = false; that.uploadText = '<i class="iconfont zrz-icon-font-lnicon34"></i> 选择文件'; }) }, getPost:function(type){ var that = this; if(this.getPostLocked == true) return; this.getPostLocked = true; axios.post(zrz_script.ajax_url+'zrz_get_post_by_id','pid='+this.postIdOrUrl+'&type='+type).then(function(resout){ if(resout.data.status == 200){ var range = that.editor.getSelection(true); that.editor.insertText(range.index, '', {},true); that.showMediaForm = false; }else{ that.getPostError = resout.data.msg; } that.getPostLocked = false; }) }, //图片上传 imgUpload:function(event){ if(!event.target.files) return; if(this.imgUploadLocked == true) return; this.imgUploadLocked = true; var files = event.target.files, that = this, filesArr = Array.prototype.slice.call(files), i = 0, key; if(this.thumbLocked){ this.thumbUPlocked = true; } filesArr.forEach(function(f) { if(!f.type.match("image.*")) { return; } //生成随机数 var id = uuid(8, 16); imgcrop(f,zrz_script.media_setting.max_width,'',function(resout){ if(resout[0] === true){ imgload(resout[1],function(imgSize){ if(!that.thumbLocked){ //编辑器插入临时图像 var range = that.editor.getSelection(true); that.editor.insertText(range.index, '\n', Quill.sources.USER); that.editor.insertEmbed(range.index, 'imagei', { alt: that.title, url: resout[1], id:id, des:'', loading:'editor-loading', imgId:'', thumb:'' }, Quill.sources.USER); that.editor.setSelection(range.index + 1, Quill.sources.SILENT); } //上传 var formData = new FormData(); if(f.type.indexOf('gif') &gt; -1){ fileData = f; }else{ fileData = resout[2]; } //区分小图和大图 if(imgSize[0] &lt; 300){ formData.append("type", 'small'); }else{ formData.append("type", 'big'); } formData.append('file',fileData,f.name); formData.append("security", that.nonce); formData.append("user_id", zrz_script.current_user); axios.post(zrz_script.ajax_url+'zrz_media_upload',formData).then(function(resout){ if(resout.data.status == 200){ if(!that.thumbLocked){ var dom = document.getElementById(id); //上传成功，替换网址 if(resout.data.status === 200){ dom.src = resout.data.Turl; dom.parentNode.className = 'content-img-box'; if(resout.data.imgdata){ dom.parentNode.id = resout.data.imgdata; that.filesArg.push(resout.data.imgdata); } }else{ //上传失败删除临时dom dom.parentNode.remove(); } Vue.nextTick(function(){ that.allAc(); }) }else{ if(resout.data.imgdata){ that.thumb = resout.data.imgdata; that.filesArg.push(resout.data.imgdata); } that.thumbSrc = resout.data.Turl; that.thumbVideo = ''; that.thumbVideoDom = ''; that.autoDraft(); that.thumbLocked = false; that.thumbUPlocked = false; } that.$refs.getFile.value = ''; that.imgUploadLocked = false; } }) }) } }) }) }, dividerHandler:function(){ var range = this.editor.getSelection(true); this.editor.insertText(range.index, '\n', Quill.sources.USER); this.editor.insertEmbed(range.index + 1, 'divider', true, Quill.sources.USER); this.editor.setSelection(range.index + 2, Quill.sources.SILENT); }, //视频上传 videoHandler:function(){ this.showMediaForm = true; this.mediaType = 'video'; this.videoText = '选择视频文件&lt;b class="gray"&gt; 或 &lt;/b&gt;拖拽到此处'; }, tagChange:function(e){ if(this.tags.length &gt; this.tagsCount){ this.lengthw = true; } var val = this.tagI.replace(/(，|。)+/g, ''); if (e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 188 || e.keyCode == 190 || this.tagI.indexOf("，")!=-1 || this.tagI.indexOf("。")!=-1 || e.type == 'blur') { e.preventDefault(); var index = this.tags.indexOf(val); if(index == -1 && val.length &gt; 0 && this.tags.length &lt; this.tagsCount ){ this.tags.push(val); this.tagI = ''; this.autoDraft(); }else{ this.tagI = ''; this.lengthw = false; } } }, removeTag:function(index){ this.tags.splice(index,1); this.autoDraft(); }, addTag:function(tag){ var that = this; if(this.tags.length &gt; this.tagsCount) return; if(this.tags.indexOf(tag) != -1){ this.dubb = tag; setTimeout(function () { that.dubb = ''; }, 100); return; }else{ this.tags.push(tag); this.autoDraft(); } }, //调整图片大小 size:function(event,type){ var dom = event.currentTarget.parentNode.parentNode.parentNode; if(type == 'small'){ dom.className = dom.className.replace(' write-img-big',''); if(dom.className.indexOf('write-img-small') == -1){ dom.className += ' write-img-small'; this.toolbarHs = true; this.toolbarHb = false; } }else{ dom.className = dom.className.replace(' write-img-small',''); if(dom.className.indexOf('write-img-big') == -1){ dom.className += ' write-img-big'; this.toolbarHs = false; this.toolbarHb = true; } } }, //插入视频 closeViedoForm:function(){ this.showMediaForm = false }, //拖拽上传 dropFile:function(){ var box = this.$refs.dropbox, that = this; box.addEventListener('dragenter',function(event){ event.preventDefault(); event.stopPropagation(); that.dropenter = true; },false); box.addEventListener('dragleave',function(event){ event.preventDefault(); event.stopPropagation(); that.dropenter = false; },false); box.addEventListener('dragover',function(event){ event.preventDefault(); event.stopPropagation(); that.dropenter = true; event.dataTransfer.effectAllowed = "copy"; },false); box.addEventListener('drop', function(event){ event.preventDefault(); event.stopPropagation(); that.updateVideo(event,'file'); }, false); }, //视频上传 updateVideo:function(event,type){ if(this.thumbLocked == true) return; this.thumbLocked = true; this.videoError = ''; var that = this; if(type == 'url'){ if(this.insertVideoButton == true) return; this.insertVideoButton = true; var data = { 'url':this.$refs.videoUrl.value, 'type':'url', 'security':this.nonce }; axios.post(zrz_script.ajax_url+'zrz_video_upload',Qs.stringify(data)).then(function(resout){ console.log(resout); if(resout.data.status == 200){ if(resout.data.msg.indexOf('smartideo') != -1){ if(!that.thumbUPlocked){ var range = that.editor.getSelection(true); var thumb = '', title = ''; if(resout.data.img){ thumb = resout.data.img.url.url; title = resout.data.img.title; } that.editor.insertText(range.index, '\n', Quill.sources.USER); that.editor.insertEmbed(range.index, 'videoUrl', { title:title, thumb:thumb, url: that.$refs.videoUrl.value, id:uuid(8, 16) }, Quill.sources.USER); that.editor.setSelection(range.index + 1, Quill.sources.SILENT); setTimeout(function () { videoBackground(); }, 300); }else{ that.thumbVideo = that.$refs.videoUrl.value; that.thumbVideoDom = resout.data.msg; that.thumbUPlocked = false; that.thumbSrc = ''; that.thumb = 0; } that.showMediaForm = false; that.$refs.videoUrl.value = ''; that.insertVideoButton = false; that.autoDraft(); }else{ that.videoError = '不支持此视频，请重试'; that.thumbUPlocked = false; } }else{ that.videoError = resout.data.msg+'请重试'; that.insertVideoButton = false; that.thumbUPlocked = false; } that.thumbLocked = false; Vue.nextTick(function(){ that.allAc(); }) }) } if(type == "file"){ if(event.dataTransfer){ var file = event.dataTransfer.files[0]; }else{ var file = event.target.files[0] } if(!file){ this.thumbLocked = false; return; } //视频尺寸限制 if(Math.round(file.size/1024*100)/100000 &gt; zrz_write.video_size){ this.videoError = '该视频体积太大，请重新选择。'; this.thumbLocked = false; return; } if(file.type.indexOf('video') != -1 || file.type.indexOf('audio') != -1){ this.dropenter = false; var data = { 'file':file, 'type':'file' }; formData = new FormData(); formData.append("type", 'file'); formData.append('file',file,file.name); formData.append("security", that.nonce); var config = { onUploadProgress: function(progressEvent){ var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'; that.progress = complete; } } axios.post(zrz_script.ajax_url+'zrz_video_upload',formData,config) .then(function(resout){ console.log(resout); if(resout.data.status == 200){ if(!that.thumbUPlocked){ that.videoText = '&lt;span class="green"&gt;上传成功，插入中...&lt;/span&gt;'; var range = that.editor.getSelection(true); that.editor.insertText(range.index, '\n', Quill.sources.USER); var filetype = 'videoFile'; if(file.type.indexOf('audio') != -1){ filetype = 'audioFile'; } that.editor.insertEmbed(range.index,filetype, { src: resout.data.Turl }, Quill.sources.USER); that.editor.setSelection(range.index + 1, Quill.sources.SILENT); setTimeout(function () { that.allAc(); }, 10); }else{ that.thumbVideo = resout.data.Turl; if(file.type.indexOf('audio') != -1){ that.thumbVideoDom = '&lt;audio src="'+resout.data.Turl+'" controls="controls"&gt;&lt;/audio&gt;'; }else{ that.thumbVideoDom = '&lt;video src="'+resout.data.Turl+'" controls="controls"&gt;&lt;/video&gt;'; } that.thumbSrc = ''; that.thumb = 0; that.thumbUPlocked = false; } that.filesArg.push(resout.data.imgdata); that.showMediaForm = false; that.autoDraft(); }else{ that.videoError = resout.data.msg || '非法操作'; that.videoText = '选择视频文件&lt;b class="gray"&gt; 或 &lt;/b&gt;拖拽到此处'; that.thumbUPlocked = false; } }) }else{ this.videoError = '不是视频文件'; this.videoText = '选择视频文件&lt;b class="gray"&gt; 或 &lt;/b&gt;拖拽到此处'; that.thumbUPlocked = false; } this.thumbLocked = false; this.insertVideoButton = false; this.$refs.getVideoFile.value = ''; } }, getDate:function(){ var date = new Date(Date.parse( new Date())), Y = date.getFullYear() + '-'; M = (date.getMonth()+1 &lt; 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = date.getDate() + ' '; h = date.getHours() + ':'; m = date.getMinutes() + ':'; s = date.getSeconds(); return Y+M+D+h+m+s; }, //获取相关文章 getRelatePost:function(pid){ if(this.relatedLocked == true) return; this.relatedLocked = true; if(this.relatedPost.length &gt;= 5){ this.relatedError = '最多只能添加5篇相关文章'; this.relatedLocked = false; return; } for (var i = 0; i &lt; this.relatedPost.length; i++) { if(this.relatedPost[i].id == pid || this.relatedPost[i].href == pid){ this.relatedError = '此文章已添加'; this.relatedLocked = false; return; } } var that = this; axios.post(zrz_script.ajax_url+'zrz_get_related_post','pid='+pid+'&type=post').then(function(resout){ if(resout.data.status == 200){ that.relatedPost.push(resout.data.msg); that.realtedId = ''; that.autoDraft(); }else{ that.relatedError = resout.data.msg; } that.relatedLocked = false; }) }, domRest:function(str,type){ if(type == 'in'){ var content = ZrzparseHTML(str), out = ''; for (var i = 0; i &lt; content.length; i++) { //图片 if(content[i].className.indexOf('content-img-box') != -1){ content[i].innerHTML += '&lt;span class="remove-img-ico click"&gt;删除&lt;/span&gt;'; content[i].setAttribute('contenteditable','false'); var des = content[i].querySelectorAll('.addDesn')[0]; var input = document.createElement('input'); if(des){ input.value = des.innerText; } if(input.value.length &gt; 0){ input.className = 'addDesn-input'; }else{ input.className = 'addDesn-input hide'; } content[i].appendChild(input); }; //视频 if(content[i].className.indexOf('content-video') != -1){ content[i].innerHTML += '&lt;span class="remove-img-ico click"&gt;删除&lt;/span&gt;'; content[i].setAttribute('contenteditable','false'); } out += content[i].outerHTML; } return out; }else if(type == 'out'){ str = str.replace(/ contenteditable="false"/g,'').replace(/ contenteditable="true"/g,'') .replace(/ placeholder="添加图片注释（可选）"/g,'').replace(/&lt;p&gt;&lt;br&gt;&lt;\/p&gt;/g,''); var content = ZrzparseHTML(str), out = ''; for (var i = 0; i &lt; content.length; i++) { //删掉删除按钮 var rem = content[i].querySelectorAll('.remove-img-ico'); if(rem.length &gt; 0){ rem[0].remove(); } var des = content[i].querySelectorAll('.addDesn-input'); if(des.length &gt; 0){ des[0].remove(); } var img = content[i].querySelectorAll('.po-img-big'); if(img.length &gt; 0){ img[0].className = 'po-img-big'; } var tool = content[i].querySelector('#imgtoolbar'); if(tool){ tool.remove(); } out += content[i].outerHTML; } return out; } }, //文章发布 postInsert:function(type){ if(this.insertPostLocked == true || this.imgUploadLocked == true || this.thumbLocked == true) return; this.postType = type; this.insertPostLocked = true; var data = { 'cats':this.catArr, 'title':this.title, 'thumb':this.thumb, 'content':this.domRest(this.editor.root.innerHTML,'out'), 'related':this.relatedPost, 'tags':this.tags, 'capabilities':this.redCapabilities, 'rmb':this.rmb, 'credit':this.credit, 'lv':this.lv, 'pid':typeof zrz_write_edit_data == "undefined" ? '' : zrz_write_edit_data.post_id, 'security':this.nonce, 'excerpt':this.excerpt, 'draft':type == 'draft' ? 1 : 0, 'thumbVideo':this.thumbVideo, 'format':this.format, 'filesArg':this.filesArg }, that = this; axios.post(zrz_script.ajax_url+'zrz_insert_post',Qs.stringify(data)).then(function(resout){ if(resout.data.status == 200){ that.subMsg = '发布成功，跳转中...'; localStorage.removeItem('zrz_write_'+zrz_script.site_info.site_mark); that.insertPostMsg = ''; window.location.href = resout.data.url; }else{ that.insertPostLocked = false; that.insertPostMsg = resout.data.msg; } that.postType = ''; }) } } }) Vue.nextTick(function(){ autosize(document.querySelector('#textarea')); })

[/content_hide]

联系作者：

相关商品

相关专题