最近我一直在使用 ContentEditable 开发一个简单的编辑器。应用程序的要求很简单,唯一的异常(exception)是能够插入不受正常编辑操作保护的文本 block 。
这些文本 block 无法编辑,必须表现为单个字符才能将光标移过它们或删除它们。
生成的 HTML 示例如下所示:
<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text with a "
<span class="attrib">
#shadow-root
"PROTECTED"
"_"
</span>
" block"
</div>
虽然这提供了我需要的 protected 文本部分,但它有几个我无法解决的主要问题:
- shadow DOM 元素后的文本不显示。
- 光标根本不会在 shadowDOM 元素中移动。
是否有更好的方法来做到这一点,或者以这种方式使用影子 DOM 是不可能的?
最佳答案
解决方案一
您可以在您的 protected 元素中将 contenteditable
属性强制设置为 false
:
<div id="editor" contenteditable style="height: 100px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text with a
<span contenteditable="false">PROTECTED</span>
block"
</div>
方案二
如果你想在没有 contenteditable=false
的情况下使用 Shadow DOM:
您可以使用 window.getSelection().anchorOffset
观察插入符位置,并检查位置是否发生变化。
如果不是,则必须使用 Selection 将插入符号移动到下一个文本节点(如果可能)的 setBaseAndExtent()
。
这是一个最小的例子,它在按下 [Right Arrow]
键时起作用:
editor.querySelector( '.attrib' )
.attachShadow({mode: 'open' } )
.innerHTML = 'PROTECTED'
editor.addEventListener( 'keydown', onkeydown )
var position = 0
function onkeydown( ev )
{
if ( ev.key == "ArrowRight" )
{
setTimeout( function ()
{
var sel = window.getSelection()
if ( position == sel.anchorOffset )
{
var anchor = sel.anchorNode
if ( anchor.nextSibling && anchor.nextSibling.nextSibling )
{
console.warn( 'move next' )
var next = anchor.nextSibling.nextSibling
sel.setBaseAndExtent( next, 1, next, 1)
}
}
position = sel.anchorOffset
} )
}
}
.attrib {
background: lightblue ;
}
#editor {
height: 100px; width:400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto
}
<div id="editor" contenteditable>"This
is standard text with a <span class="attrib">TEST</span> block"
</div>
关于javascript - 在 ContentEditable 中使用 Shadow DOM 创建 protected 文本 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43119814/