javascript - 不删除 contenteditable 设置为 true 的 div 中的子元素

Question

我有一个将 contenteditable 设置为 true 的 div 标签。我希望用户能够编辑该 div 内的文本，但不能删除其中的任何其他 div 或 span 标签。例如使用以下代码。

<div class="container" contenteditable="true">
This Content Should be Editable
<span contenteditable="false"
   style="display: inline;">
   This Should not be Editable</span>
</div>

当我将 contenteditable 设置为 false 时，我在 span 标签中得到了想要的结果。但是当我在 div 标签中按下退格键时，我也能够删除整个 span 标签。我想在 div 中锁定 span 标签，比如不允许用户删除或编辑它。现在，我认为拥有一个 contenteditable div 标签允许用户完全删除 span。是否有解决方法来实现这一目标。而且我不想在另一个范围内使用可编辑文本。

Answer 1

更新 #2:在这个例子中似乎组合了一些东西。

它首先监听容器中的“Delete”按键事件，然后监听容器中意外删除的 contenteditable="false" span。

灵感来自 this post在光标位置和 this post关于手动调度键盘事件

const DOMNodeRemoved = 'DOMNodeRemoved';
const DELETE = 'Delete';

const container = document.querySelector(".container");
container.addEventListener('keydown', containerListner, false);

const unEditableSelector = '[contenteditable="false"]';
const unEditable = container.querySelector(unEditableSelector);
unEditable.addEventListener("DOMNodeRemoved", unEditableListner, false)

function containerListner(e) { return e.key === DELETE && manuallyTriggerDeleteKey(e) }

function unEditableListner(e) { return e.type === DOMNodeRemoved && container.append(unEditable) }

function manuallyTriggerDeleteKey(e) {
    const cursorPosition = window.getSelection().getRangeAt(0).startOffset
    const stringToDelete = e.target.textContent.substr(cursorPosition).trim();
    const stripped = unEditable.textContent.trim();
    
    if (stripped === stringToDelete ) { return e.preventDefault(); }
    return new KeyboardEvent('keypress',  { 'key': 'Delete' })
}

<div class="container" contenteditable="true">
This Content Should be Editable
<span contenteditable="false"
   style="display: inline;">
   &nbsp;This Should not be Editable</span>
</div>

您可以尝试利用 focus 和 blur 事件并有选择地hide 和 show 管理跨度。

here's an example

更新 1:问题是如果用户执行诸如使用删除键而不是退格键之类的操作，跨度可能会被删除

使用 DOMNodeRemoved 事件监听器，您可以将节点追加回容器以防意外删除。

here's an example灵感来自 this post关于 DOM 突变事件

const DOMNodeRemoved = 'DOMNodeRemoved';

let unEditable = null;

const unEditableSelector = '*[contenteditable="false"]';
const container = document.querySelector(".container");

const appendUneditable = (evt) => unEditable &&
    !evt.relatedNode.querySelector(unEditableSelector) &&
    evt.relatedNode.append(unEditable);

const listener = (evt) => evt.type === DOMNodeRemoved && appendUneditable(evt);

container.addEventListener("focus", focus);
container.addEventListener("blur", blur);

function focus(e) {
  unEditable = e.target.querySelector(unEditableSelector);
  unEditable.addEventListener("DOMNodeRemoved", listener, false);
}

function blur(e) {
  unEditable && e.target.append(unEditable);
  unEditable && unEditable.removeEventListener("DOMNodeRemoved", listener);
}