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

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

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