我想允许使用contenteditable编辑有序列表.
当用户更改或在列表中添加新元素时,我希望能够处理文本(例如,包裹在span标签中,替换文本等).
我为Enter键创建了一个侦听器,并且可以获取最后一个列表元素值.
我试图更改此值并替换为新值.但是,这将填充在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
最佳答案
您可以使用MutationObserver来检测何时将孩子添加到列表中,然后更新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: ' 原文链接：https://www.f2er.com/html/530481.html