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

因为教程的复杂性,我直接贴出整张代码,直接全部替换就行了 有时间再做详细的教程
', {},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); }, hide…
', {},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') > -1){
fileData = f;
}else{
fileData = resout[2];
} //区分小图和大图
if(imgSize[0] < 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 = '选择视频文件<b class="gray"> 或 </b>拖拽到此处';
},
tagChange:function(e){
if(this.tags.length > 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 > 0 && this.tags.length < 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 > 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 > 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 = '<span class="green">上传成功,插入中...</span>';
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 = '<audio src="'+resout.data.Turl+'" controls="controls"></audio>';
}else{
that.thumbVideoDom = '<video src="'+resout.data.Turl+'" controls="controls"></video>';
}
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 = '选择视频文件<b class="gray"> 或 </b>拖拽到此处';
that.thumbUPlocked = false;
}
})
}else{
this.videoError = '不是视频文件';
this.videoText = '选择视频文件<b class="gray"> 或 </b>拖拽到此处';
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 < 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 >= 5){
this.relatedError = '最多只能添加5篇相关文章';
this.relatedLocked = false;
return;
}
for (var i = 0; i < 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 < content.length; i++) {
//图片
if(content[i].className.indexOf('content-img-box') != -1){
content[i].innerHTML += '<span class="remove-img-ico click">删除</span>';
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 > 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 += '<span class="remove-img-ico click">删除</span>';
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(/<p><br><\/p>/g,'');
var content = ZrzparseHTML(str),
out = '';
for (var i = 0; i < content.length; i++) {
//删掉删除按钮
var rem = content[i].querySelectorAll('.remove-img-ico');
if(rem.length > 0){
rem[0].remove();
} var des = content[i].querySelectorAll('.addDesn-input');
if(des.length > 0){
des[0].remove();
} var img = content[i].querySelectorAll('.po-img-big');
if(img.length > 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]
相关专题
B2/7B2主题- WordPress多功能主题 B2的是一款面向未来的Wordpress主题,这款主题与市面上所有已售主题有着巨大的差别。您看到的可能仅仅是它的外表,它的运行机制和功能可能是您更需要了解的。 4年多,我们只专注这一个主题的开发,用户购买以后终生享受升级服务,您买完了直接用,剩下…