"i18next": "^21.4.0",多语言
"wangeditor": "^4.7.15",可复制粘贴单张图片
<template>
<div id="wangEditor">
</div>
</template>
<script>
import E from 'wangeditor'
import i18next from 'i18next'
import { uploadPicOrVideo } from '@/api/dataInsight/knowledge'
export default {
name: 'WangEditor',
props: {
html: {
type: String,
default: '',
},
isDisabled: {
type: Boolean,
default: false
},
height: {
type: Number,
default: 400
}
},
data() {
return {
editor: '',
}
},
watch: {
//为了解决实时显示编辑器内容
html: {
handler(newVal) {
this.$nextTick(() => {
if (newVal && this.editor)
this.editor.txt.html(newVal)
})
},
deep: true,
immediate: true,
},
isDisabled: {
handler(newVal) {
if (newVal) {
this.$nextTick(() => {
if (newVal && this.editor)
this.editor.disable()
})
}
},
deep: true,
immediate: true,
}
},
methods: {
// 处理粘贴的图片,传递的参数是粘贴来的数据
disposePasteImg(pasteStr) {
console.log(pasteStr);
let _this = this;
return new Promise(function (resolve) {
// 用于计数图片数量
let imgNum = 0;
//匹配图片
let imgReg = /<img.*?(?:>|\/>)/gi;
//匹配src属性
// eslint-disable-next-line no-useless-escape
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
// 提取图片连接
if (pasteStr.match(imgReg)) {
pasteStr.replace(imgReg, function (txt) {
return txt.replace(srcReg, function (src) {
let img_src = src.match(srcReg)[1];
console.log(img_src);
//正则把?x-oss-process后面的都去掉
img_src = img_src.replace(/\?.*/i, "");
img_src = img_src.replace("file:///", "");
// 查找到一个图片地址就讲图片数量加1
imgNum++;
// 将图片转成图片文件对象并上传得到图片地址,传递的参数是图片地址
_this.imgUrlSwitchBlob(img_src).then((res) => {
console.log("得到的地址res", res);
/**
* 得到图片地址进行替换并将替换之后的文本返回渲染
*/
// 图片地址进行替换
pasteStr = pasteStr.replace(img_src, res);
// 替换之后将图片数量减1
imgNum--;
// 只有图片数量变成0的时候才会进行返回
if (imgNum == 0) {
console.log("返回imgNum", imgNum, pasteStr)
resolve(pasteStr);
}
});
});
});
} else {
resolve(pasteStr);
}
});
},
imgUrlSwitchBlob(param) {
let _this = this;
return new Promise(function (resolve) {
// 得到图片后缀
let suffix = param.substring(param.lastIndexOf(".") + 1); //获取后缀
// 设置图片名称及后缀
const key =
new Date().getTime() +
Math.random().toString().substr(2, 5) +
"." +
suffix;
console.log("得到的key", key);
// 创建图片对象
let image = new Image();
// 允许跨域
image.setAttribute("crossOrigin", "anonymous");
image.src = param;
image.onload = () => {
console.log("onload");
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
console.log("blob", blob)
// 得到的blob是一个图片对象,经图片对象进行上传得到图片地址.key是文件名称
/**
* @函数名称: 调用函数进行上传
* @返回值: 得到的图片路径
* @param {String} key 图片名称,包含后缀
* @param {Object} blob 文件对象
*/
_this.upPasteImg(key, blob).then((res) => {
resolve(res);
});
});
};
image.onload();
});
},
upPasteImg(key, file) {
console.log("得到的file", file);
let _this = this;
let formdata = new FormData()
formdata.append('file', file)
return new Promise(function (resolve) {
uploadPicOrVideo(formdata).then(res => {
if (res && res.code === 200) {
let imgUrl = res.data
resolve(imgUrl)
fileInfo.status = 'done'
} else {
fileInfo.status = 'error'
}
}).catch(err => {
fileInfo.status = 'error'
})
})
},
},
mounted() {
const _this = this
this.editor = new E('#wangEditor')
// 配置全屏功能按钮是否展示
this.editor.config.showFullScreen = false
// console.log(this.editor.config.menus)
// this.editor.config.menus = [
// "head",
// "bold",
// "fontSize",
// "fontName",
// "italic",
// "underline",
// "strikeThrough",
// "indent",
// "lineHeight",
// "foreColor",
// "backColor",
// "link",
// "list",
// "todo",
// "justify",
// "quote",
// "emoticon",
// "image",
// "video",
// "table",
// "code",
// "splitLine",
// "undo",
// "redo"
// ]
if(localStorage.getItem('language')=='en-US'){
this.editor.config.lang = 'en'
}else{
this.editor.config.lang = 'zh-CN'
}
this.editor.i18next = i18next;
this.editor.config.uploadImgShowBase64 = true;
this.editor.config.showLinkImg = false;
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
console.log(resultFiles);
let formData = new FormData()
let file = resultFiles[0];
formData.append('file', file)
uploadPicOrVideo(formData).then(res => {
if (res && res.code === 200) {
let imgUrl = res.data
insertImgFn(imgUrl)
}
}).catch(err => {
})
}
this.editor.config.onchange = function (newHtml) {
_this.$emit('receiveContent', newHtml)
};
// 配置粘贴文本的内容处理
// this.editor.config.pasteTextHandle = function (pasteStr) {
// // 需要判断是否是纯文本,不是纯文本执行函数,是纯文本返回
// // 验证图片中是否包含img标签,具有得到true否则得到false
// var containsImage = pasteStr.search(/<img /i) >= 0;
// // 存在图片就执行
// if (containsImage) {
// // 打开loading
// _this.pasteTextFulfill = true;
// _this.disposePasteImg(pasteStr).then((res) => {
// console.log("配置粘贴文本的内容处理res", res);
// _this.editor.cmd.do('insertHTML', res) // 在光标位置插入内容
// // editor.txt.append(res); // 将内容追加上
// // 关闭loading
// _this.pasteTextFulfill = false;
// });
// }
// return containsImage ? "" : pasteStr;
// };
this.editor.create()
// this.editor.disable()
// console.log('@', this.editor)
// console.log(this.editor.config.menus)
},
beforeDestroy() {
// 销毁编辑器
this.editor.destroy()
this.editor = null
},
}
</script>
<style>
.w-e-text-container {
height: calc(100% - 42px) !important;
}
.w-e-content-preview {
background: #f3f3f3;
}
</style>
647

被折叠的 条评论
为什么被折叠?



