在代码打开的时候,可以直接 alt + B 解除隐藏
但是代码块关闭之后,它又隐藏了(本来不应该有隐藏保持的功能的)
而且关闭应用重进之后它也是默认隐藏。
代码如下,有人可以帮忙看一下吗 😭 :
// 实现图片块默认模糊,鼠标悬停清晰,其他块按下 Ctrl/Meta + Alt + B 可模糊
(() => {
// 模糊样式
const filter = 'blur(6px)';
// 模糊期间块是否可编辑,默认禁止编辑,逻辑与原代码一致
const editableOnBlur = false;
// 初始为图片添加默认模糊效果
const applyDefaultBlurToImages = () => {
const imageElements = document.querySelectorAll('.protyle-wysiwyg img, .img--select img');
imageElements.forEach((img) => {
img.style.filter = filter;
// 添加悬停事件,悬停清晰,移开模糊
img.addEventListener('mouseenter', () => {
img.style.filter = '';
});
img.addEventListener('mouseleave', () => {
img.style.filter = filter;
});
});
};
// 调用一次以确保初始状态
applyDefaultBlurToImages();
// 监听 DOM 变化,动态为新增图片块添加模糊效果
const observer = new MutationObserver(() => {
applyDefaultBlurToImages();
});
observer.observe(document.body, { childList: true, subtree: true });
// 监听按键事件,处理其他块的模糊效果
document.addEventListener('keydown', (event) => {
// 检查是否按下了 Ctrl/Meta + Alt + B
//(event.ctrlKey || event.metaKey) &&
if (event.altKey && event.code === 'KeyB' && !event.shiftKey) {
// 遍历目标块元素
const targetElements = document.querySelectorAll('.protyle-wysiwyg--select');
const isBlurred = !!document.querySelector(`.protyle-wysiwyg--select[style*="${filter}"]`);
targetElements.forEach((element) => {
if (isBlurred) {
// 如果已经应用了 blur 样式,则移除
element.style.filter = '';
// 恢复编辑状态
if (!editableOnBlur) {
const contenteditableEl = element.querySelector('[contenteditable][data-blurred="true"]') || element.closest('[contenteditable][data-blurred="true"]');
if (contenteditableEl) {
contenteditableEl.setAttribute('contenteditable', true);
delete contenteditableEl.dataset.blurred;
}
}
} else {
// 如果没有应用 blur 样式,则添加
element.style.filter = filter;
// 禁止编辑
if (!editableOnBlur) {
const contenteditableEl = element.querySelector('[contenteditable="true"]') || element.closest('[contenteditable="true"]');
if (contenteditableEl) {
contenteditableEl.setAttribute('contenteditable', false);
contenteditableEl.dataset.blurred = true;
}
}
}
});
}
});
})();
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于