vditor編輯器設置代碼，及上傳設置
methods: { //編輯器
vditorFun() {
let self = this
this.contentEditor = new Vditor("markdownContent",{
height:600,
width:800,
placeholder:'開始編輯...',
toolbar: [
// "emoji", 表情
"headings",
"bold",
"italic",
"strike",
"link",
"|",
"list",
"ordered-list",
// "check",
"outdent",
"indent",
"|",
"quote",
"line",
"code",
"inline-code",
"insert-before",
"insert-after",
"|",
// "upload",默認上傳
{ //自定義上傳
hotkey: "",
name: "upload",
// tipPosition: "s",
tip: "上傳圖片",
className: "right",
},
// "record",
"table",
"|",
"undo",
"redo",
"|",
"fullscreen",
"edit-mode",
{
name: "more",
toolbar: [
"both",
// "code-theme",
// "content-theme",
"export",
"outline",
"preview",
// "devtools",
// "info",
// "help",
],
}
// ,"|",
// {
// hotkey: "⌘-S",
// name: "save",
// tipPosition: "s",
// tip: "保存",
// className: "right",
// icon: `<img style="height: 16px" src='https://img.58cdn.com.cn/escstatic/docs/imgUpload/idocs/save.svg'/>`,
// click() {
// that.saveDoc();
// }
// },
],
toolbarConfig:{
pin:true
},
counter: {
enable: true,
type:'字數統計',
},
//默認開啟了大綱
outline: {
enable: true
},
cache:{
enable:false
},
//編輯器有焦點和失去焦點可以判斷是否有內容，此處自己封裝檢查校驗即可
blur() {
self.vaditEditorContent()
},
focus() {
self.vaditEditorContent()
},
//因我的需求是不需要表情符號，所以把編輯器中的表情符號都刪除
input(val) {
let pattern = new RegExp('[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]');
if (val != "" && val != null) {
//去除表情
let rs = "";
if (pattern.test(val)) {
for (let i = 0; i < val.length; i++) {
rs = rs + val.substr(i, 1).replace(pattern, '');
}
} else {
rs = val
}
//替換防盜鏈圖片，有兩種方法，第一種是替換頁面的圖片路徑，替換頁面的需要在詳情回顯的時候也需要進行處理，方法和替換頁面的方法一樣；第二是直接替換md格式數據中的地址
第一種：
let reg = /(http|https):\/\/([\w.]+\/?)\S*/gi;
let valueMatch = rs.match(reg);
let replaceUrl = self.gb.mdImgPath('')
self.contentEditor.setValue(rs)
setTimeout(() => {
let imgLinkPar = $('.vditor-ir').find('.vditor-reset').children('p')
let childTag = imgLinkPar.find('span.vditor-ir__node')
childTag.each(function () {
let imgLinkTag = $(this).find('img').attr('src')+')'
for (let k = 0; k < valueMatch.length; k++) {
if (imgLinkTag == valueMatch[k]) {
$(this).find('img').attr('src', replaceUrl)
}
}
})
}, 300);
第二種：
setTimeout(() => {
//替換防盜鏈圖片
let reg = /(http|https):\/\/([\w.]+\/?)\S*/gi;
if (reg.test(rs)) {
let valueMatch = rs.match(reg);
// console.log(valueMatch)
let replaceUrl = self.gb.mdImgPath('')+')'
let linkOutUrl = rs
let urlStr
for (let k = 0; k < valueMatch.length; k++) {
let ishttps = 'https:' == valueMatch[k] ? true: false;
if(ishttps){
urlStr = valueMatch[k].split("https://");
}else{
urlStr = valueMatch[k].split("http://");
}
// console.log(urlStr)
const index = valueMatch[k].indexOf("/")+2;
let endUrl = valueMatch[k].substring(index)
let threeSplit = endUrl.split('/')
let getThree = threeSplit.slice(0, threeSplit.length-3).join('/')
// console.log(getThree)
if (getThree == 'mmbiz.qpic.cn') {
linkOutUrl = linkOutUrl.replace(valueMatch[k], replaceUrl)
}
}
self.contentEditor.setValue(linkOutUrl)
}
}, 2000);
}
},
//編輯頁面使用，發布頁面不需要
after: () => {
self.contentEditor.setValue(self.activityForm.activity_content)
},
mode: 'wysiwyg', // 模式設置 所見即所得模式， 上傳的圖片 分塊展示
//這里寫上傳
upload:{
accept:'image/jpg, image/jpeg, image/png',//規定上傳的圖片格式
url:this.gb.reqPath('/v1/Activity/upload'),//請求的接口
multiple: false,
fieldName: 'file',
max: 2 * 1024 * 1024,//上傳圖片的大小
extraData: {'access_token': this.token}, //為 FormData 添加額外的參數
linkToImgUrl:this.gb.reqPath('/v1/Activity/upload'),
filename(name) {
return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
.replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
.replace("/\\s/g", "");
},
validate(msg) {
console.log(msg+"格式")
},
//粘貼圖片回顯處理，如果有圖片加了防盜鏈，則讓后台代理替換成自己的圖片
linkToImgFormat(files) {
let code = 0
let msg = ''
let data = JSON.parse(files)
// let linkImgName = data.result.path
// //上傳圖片請求狀態
if(data.ret_code == 200) {
// let lastTipNum = linkImgName.substr(linkImgName.lastIndexOf('/', linkImgName.lastIndexOf('/') - 1) + 1);
// let index = lastTipNum.lastIndexOf("\/");
// let imgUrl = decodeURI(lastTipNum.substring(index + 1, lastTipNum.length));
let responseData = self.gb.imgOutLinkPath(data.result.path)
let succUrl = {}
let originalURL = 'originalURL'
let url = 'url'
succUrl[originalURL] = data.result.originalURL
succUrl[url] = responseData
let end = JSON.stringify({
msg,
code,
data: succUrl
})
return end
} else {
self.$message({
message: '圖片上傳失敗！',
type: 'error'
})
}
},
//上傳圖片回顯處理 此方法上傳后點擊圖片顯示圖片路徑地址
format(files, responseText){
// let imageResult = JSON.parse(responseText)
let code = JSON.parse(responseText)
let msg = JSON.parse(responseText)
let data = JSON.parse(responseText)
let filName = data.result.cover_files
//上傳圖片請求狀態
if(data.ret_code == 200) {
let lastTipNum = filName.substr(filName.lastIndexOf('/', filName.lastIndexOf('/') - 1) + 1);
let index = lastTipNum.lastIndexOf("\/");
self.imgNameStr = decodeURI(lastTipNum.substring(index + 1, lastTipNum.length));
let responseData = self.gb.imgPath(data.result.cover_files)
let succ = {}
succ[self.imgNameStr] = responseData
//圖片回顯
return JSON.stringify({
msg,
code,
data:{
errFiles: [],
succMap: succ
// succMap: {
// 'default.png': `${responseData}`
// }
}
})
} else {
self.$message({
message: '圖片上傳失敗！',
type: 'error'
})
}
},
error(msg) {
console.log(msg+"上傳失敗了")
},
}
})
},
//token
getToken () {
this.token = getStore('token')
},
}
二、上傳圖片可以通過success屬性中設置 上傳后的點擊圖片會顯示代碼
this.contentEditor = new Vditor('content', {
height: 360,
toolbarConfig: {
pin: true
},
cache: {
enable: false
},
mode: 'wysiwyg', // 所見即所得 分塊展示，操作內容方便
upload: {
withCredentials:false,
accept: 'image/*',
multiple: false,
headers: {
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
},
token: 'test',
url: '/api/common/upload',
linkToImgUrl: '/api/common/upload',
// linkToImgUrl(responseText){
// console.log(responseText);
// },
fieldName: 'file',
success(editor, msg){
let content = _this.contentEditor.getHTML()
content += "<img src='"+ JSON.parse(msg).url +"'>"
// _this.contentEditor.setValue(content)
_this.contentEditor.insertValue(content) // 設置值回顯 這種方式 刪除內容等分塊展示明顯，方便操作
},
//上傳圖片回顯處理
// format(files, responseText){
// console.log(files)
// console.log(responseText)
// let code = JSON.parse(responseText)
// let msg = JSON.parse(responseText)
// let data = JSON.parse(responseText)
// let filName = data.fileName
// if(data.code == 200) {
// let succ = {}
// self.lastTipName = filName.substr(filName.lastIndexOf('/'));
// succ[self.lastTipName] = data.url
// return JSON.stringify({
// msg,
// code,
// data:{
// errFiles: [],
// succMap: succ
// // succMap: {
// // 'default.png': `${data.url}`
// // }
// }
// })
// } else {
// self.$message({
// message: '圖片上傳失敗！',
// type: 'error'
// })
// }
// },
error(msg) {
console.log(msg+"上傳失敗了")
},
filename (name) {
return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
replace('/\\s/g', '')
},
},
after: () => {
let content = this.form.content
if (content === undefined || content === null) {
content = ''
}
this.contentEditor.setValue(content)
}
})