如何在内容可编辑的 div 中编辑确切的元素？答案

【问题标题】：How to get the exact element edited within a contenteditable div?如何在内容可编辑的 div 中编辑确切的元素？
【发布时间】：2018-05-07 18:17:28
【问题描述】：

我有一个内容可编辑的 div，并附有一个 keyup 事件。当用户键入时，在该 div 中创建了许多 p 标签。

$(".pad").keyup(function(e) {
    doSomething();
});

这就是keyup 事件。

如何确定用户在 contenteditable div 中编辑/创建了哪个元素？

我尝试了以下方法，但似乎不起作用：

$(".pad p").keyup(function(e) {
    doSomething();
});

我们的目标是拥有这样的东西：

$(".pad").keyup(function(e) {
    theEditedElement = ...;
    $(theEditedElement).css("color","red");
    $(theEditedElement).(...);
});

我们开始：

<div class="pad" contenteditable="true">
    <p>Some text</p>
</div>

然后用户将其编辑为：

<div class="pad" contenteditable="true">
    <p>Some text</p>
    <p>Some more text</p>
    <p>Even <b>more</b> text</p>
</div>

如果用户决定编辑<p>Some more text</p>，则应检索特定的<p> 元素。

【问题讨论】：

标签： javascript jquery keypress contenteditable keyup

【解决方案1】：

如果您希望您的事件目标是可编辑内容的 div 的子节点，而不是 div 本身，您还需要将这些子节点设置为 contenteditable。您可以像这样动态地执行此操作。

const contentEl = document.querySelector('.pad');
const paras = contentEl.childNodes;

// here, set contenteditable attribute for all paragraphs inside of that div
for (let i = 0; i < paras.length; i++) {
  if (paras[i].nodeType === document.ELEMENT_NODE) {
    paras[i].setAttribute('contenteditable', true);
  }
}

contentEl.addEventListener('keyup', event => {
  // event.target will be the element that you are asking for 
  const theEditedElement = event.target;
  console.log(theEditedElement);
  theEditedElement.style.color = 'red';
});

<div class="pad">
    <p>Some text</p>
    <p>Some more text</p>
    <p>Even <b>more</b> text</p>
</div>

请注意，当在 div 内部创建新的 p 元素时，您可能需要再次运行将 contenteditable 属性设置为 div 的子元素的代码。

另一种选择是创建突变观察者并让它处理对封闭div的更改，以防添加任何新段落（让它设置新添加段落的contenteditable属性）。

const contentEl = document.querySelector('.pad');
const paras = contentEl.childNodes;

for (let i = 0; i < paras.length; i++) {
  if (paras[i].nodeType === document.ELEMENT_NODE) {
    paras[i].setAttribute('contenteditable', true);
  }
}

contentEl.addEventListener('keyup', event => {
  // event.target will be the element that you are asking for 
  const theEditedElement = event.target;
  console.log(theEditedElement);
  theEditedElement.style.color = 'red';
});

// this code here is just to demonstrate the change to the enclosing div
const addNewParagraph = () => {
  const p = document.createElement('p');
  contentEl.appendChild(p);
  p.textContent = 'new paragraph';
};

const btn = document.querySelector('button');
btn.addEventListener('click', addNewParagraph);

// create mutation observer
const config = { childList: true };
const callback = function(mutationList) {
  for (const mutation of mutationList) {
    if (mutation.type === 'childList') {
      console.log('new paragraph has been added');
      // get the added node and set its contenteditable attribute
      mutation.addedNodes[0].setAttribute('contenteditable', true);
    }
  }
}
const observer = new MutationObserver(callback);
observer.observe(contentEl, config);

<button>add new paragraph</button>

<div class="pad">
    <p>Some text</p>
    <p>Some more text</p>
    <p>Even <b>more</b> text</p>
</div>

【讨论】：