背景
由于思源 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>
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于