gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理从word粘贴图片不显示问题

This commit is contained in:
jacky 2024-05-09 18:26:58 +08:00
parent c766105374
commit 955a947411
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/richtext/rich-edit.vue
View File

@ -75,29 +75,33 @@ const handleCreated = (editor) => {
const customPaste = (editor, event, callback) => {
let htmlData = event.clipboardData.getData('text/html') // 获取粘贴的 html
console.log(htmlData)
// console.log(htmlData)
let rtfData = event.clipboardData.getData('text/rtf') // 获取粘贴的 html
console.log('-------------- rtfData --------------', rtfData)
// console.log('-------------- rtfData --------------', rtfData)
htmlData = htmlData.replace(/<\/?span[^>]*>/g, '');
htmlData = htmlData.replace('<img', '<img referrerpolicy="no-referrer"')
htmlData = htmlData.replace(/<img/g, '<img referrerpolicy="no-referrer"')
// console.log('111111111111 replace after 1111111111', htmlData)
// 处理 word 内图片
// 从html内容中查找粘贴内容中是否有图片元素，并返回img标签的属性src值的集合
const imgSrcs = htmlData.match(/<img [^>]*src=['"]([^'"]+)[^>]*>/g);
// 如果有
if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
console.log('imgSrcs', imgSrcs)
// 从rtf内容中查找图片数据
const rtfImageData = extractImageDataFromRtf(rtfData);
console.log('rtfImageData', rtfImageData)
// 如果找到
if (rtfImageData.length) {
// TODO：此处可以将图片上传到自己的服务器上,
// 执行替换：将html内容中的img标签的src替换成ref中的图片数据，如果上面上传了则为图片路径
htmlData = replaceImageFile(htmlData, imgSrcs, rtfImageData)
console.log('+++++++++++++++++++ replace after +++++++++++++++++++', htmlData)
if (rtfData !== "") {
// 处理 word 内图片
// 从html内容中查找粘贴内容中是否有图片元素，并返回img标签的属性src值的集合
const imgSrcs = htmlData.match(/<img [^>]*src=['"]([^'"]+)[^>]*>/g);
// 如果有
if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
// console.log('imgSrcs', imgSrcs)
// 从rtf内容中查找图片数据
const rtfImageData = extractImageDataFromRtf(rtfData);
// console.log('rtfImageData', rtfImageData)
// 如果找到
if (rtfImageData.length) {
// TODO：此处可以将图片上传到自己的服务器上,
// 执行替换：将html内容中的img标签的src替换成ref中的图片数据，如果上面上传了则为图片路径
htmlData = replaceImageFile(htmlData, imgSrcs, rtfImageData)
// console.log('22222222222222222 replace after 22222222222222222', htmlData)
}
}
}