在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元素之后的文本。
• 光标根本不会在shadowDOM元素中移动。

有没有更好的方法可以做到这一点，还是无法以这种方式使用影子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

如果要不使用Shadow DOM contenteditable=false：

您可以使用观察插入符的位置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>