背景
由于思源 HTML 块是使用 shadow DOM 嵌入笔记 DOM 树中的, 因此在 HTML 块中使用 <script>
标签插入的脚本没法简单获取块本身的 DOM。
解决方案
原理: 由于思源所有带编辑框的块都有一个 HTML 属性 data-content
, 里面存放编辑框转义后的内容, 因此可以通过 CSS 的 CSS3 [attribute*=value] 选择器 查询到当前块, 直接上代码
<script>
/* 使用括号划分一下作用域, 避免函数的重定义 */
{
/* 自定义 ID, 每个 HTML 块应该使用不同的 ID */
const CUSTOM_ID = "E5C1EC9E30C14616A1974670281D2800";
/**
* HTML 块中的脚本获取当前块相关信息
* @params {string} customID 内部定义的 ID
* @returns {string} id 当前 HTML 块 ID
* @returns {HTMLElement} block 当前 HTML 块
* @returns {HTMLElement} shadowRoot 当前 HTML 块 shadowRoot
*/
function This(customID) {
let protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`);
if (protyle) {
let block = protyle.parentElement.parentElement;
return {
id: block.dataset.nodeId,
block: block,
shadowRoot: protyle.shadowRoot,
};
} else return null;
}
const THIS = This(CUSTOM_ID);
console.log(THIS);
}
</script>
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于