javascript - 如何在 Enter 键按下时操作列表元素

Question

我想允许使用 contenteditable 编辑有序列表。当用户在列表中更改或添加新元素时，我希望能够操作文本(例如，包裹在 span 标签中、替换文本等)。

我已经为 Enter 键创建了一个监听器，可以获取最后一个列表元素值。我试图改变它并替换为新值。但是，这会填充按回车键创建的新列表元素。

<div>
   <ol contenteditable=true class="editor">
    <li><br></li>
   </ol>
</div>

$('.editor' ).on('keydown .editable', function(e){
    if ( e.keyCode === 13 ) {   

    var insertText = "<span>"+e.target.lastElementChild.innerText+"</span>";
    e.target.lastElementChild.innerHTML = insertText;
    return true
  }
 });

为列表中任何位置的新条目实现此功能的最佳方法是什么，而不仅仅是末尾？对 Jquery 解决方案开放

示例 jsfiddle

Answer 1

你可以使用 MutationObserver检测 child 何时添加到您的列表中，然后更新 previousSibling将其包装在 <span> 中:

function subscriber(mutations) {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      const prev = node.previousSibling;
      if (prev) {
        prev.innerHTML = `<span>${prev.innerHTML.replace(/<br>$/, '')}</span>`;
      }
    });
  });
}

const observer = new MutationObserver(subscriber);
observer.observe(document.querySelector('ol[contenteditable]'), { childList: true });

.editor span::after {
  content: '😀';
}

<ol contenteditable class="editor">
  <li>First li</li>
</ol>