JavaScript 修复Discuz!X3.5不能Ctrl+V粘贴图片的问题
2025/10/16 18:59:08
先说原因:如果在Discuz!X3.5的编辑框里面粘贴图片,那么图片会被保存为Base64(data:image/png;base64开头的链接)
但是,Discuz!X3.5在处理的时候会在这个链接的前面加一个HTTP的前缀,像这样:
<img id="aimg_t6Wvt" class="zoom" src="http://data:image/png;base64,图片BASE64" border="0" alt="">
解决办法:
我们只需要通过JavaScript去掉这个HTTP前缀即可
[mw_shl_code=javascript,true]function fixDataUrlImages() {
// 获取页面中所有的IMG元素
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
const img = images<i>;
const src = img.getAttribute('src');
// 检查是否是错误格式的data URL
if (src && src.includes('http://data:image') || src.includes('https://data:image')) {
// 修复data URL格式
const fixedSrc = src.replace(/https?:\/\/data:/, 'data:');
img.setAttribute('src', fixedSrc);
console.log('修复图片URL:', src, '->', fixedSrc);
}
}
}
// 页面加载完成后执行修复
document.addEventListener('DOMContentLoaded', function() {
fixDataUrlImages();
});
// 如果页面是动态加载的,也可以使用MutationObserver监听DOM变化
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
fixDataUrlImages();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// 也可以直接调用修复函数
// fixDataUrlImages();[/mw_shl_code]
使用方法:
把这个JS嵌入Discuz!X3.5的帖子显示页面即可
但是,Discuz!X3.5在处理的时候会在这个链接的前面加一个HTTP的前缀,像这样:
<img id="aimg_t6Wvt" class="zoom" src="http://data:image/png;base64,图片BASE64" border="0" alt="">
解决办法:
我们只需要通过JavaScript去掉这个HTTP前缀即可
[mw_shl_code=javascript,true]function fixDataUrlImages() {
// 获取页面中所有的IMG元素
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
const img = images<i>;
const src = img.getAttribute('src');
// 检查是否是错误格式的data URL
if (src && src.includes('http://data:image') || src.includes('https://data:image')) {
// 修复data URL格式
const fixedSrc = src.replace(/https?:\/\/data:/, 'data:');
img.setAttribute('src', fixedSrc);
console.log('修复图片URL:', src, '->', fixedSrc);
}
}
}
// 页面加载完成后执行修复
document.addEventListener('DOMContentLoaded', function() {
fixDataUrlImages();
});
// 如果页面是动态加载的,也可以使用MutationObserver监听DOM变化
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
fixDataUrlImages();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// 也可以直接调用修复函数
// fixDataUrlImages();[/mw_shl_code]
使用方法:
把这个JS嵌入Discuz!X3.5的帖子显示页面即可