javascript - 在 ContentEditable 中使用 Shadow DOM 创建 protected 文本 block

Question

最近我一直在使用 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 是不可能的？

Answer 1

解决方案一

您可以在您的 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>