在 ContentEditable 中使用 Shadow DOM 创建受保护的文本块

Question

最近我一直在使用 ContentEditable 开发一个简单的编辑器。应用程序的要求很简单，唯一的例外是能够插入不受正常编辑操作保护的文本块。

这些文本块无法编辑，必须表现为单个字符才能将光标移过它们或删除它们。

结果 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>

虽然这提供了我需要的受保护文本部分，但它有几个我无法解决的主要问题：

阴影 DOM 元素后的文本不显示。
光标根本没有穿过阴影DOM 元素。

是否有更好的方法来做到这一点，或者只是不能以这种方式使用阴影 DOM？

Answer 1

解决方案 1

您可以在受保护的元素中将 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>

解决方案 2

如果您想在没有 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>

在 ContentEditable 中使用 Shadow DOM 创建受保护的文本块

Using Shadow DOM within ContentEditable to create protected blocks of text

html

javascript

contenteditable

web-component

shadow-dom