Question

我想允许使用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

Answer 1

您可以使用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: '';
}

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

Answer 2

您可以将逻辑绑定到最后一个li，并根据其发出的事件执行逻辑。

$('.editor .last-item')
  .on('click', function(e){
    // clear out the html so the user can just type
    e.target.innerHTML = '';
  })
  .on('keydown', function(e){
    if (e.keyCode === 13) {
      // ignore the enter key so it doesn't insert a new like
      e.preventDefault();
      // create the new li before the last one
      $('<li>'+ e.target.innerHTML.trim() +'</li>').insertBefore(e.target);
      // clear out the html so the user can keep entering items
      e.target.innerHTML = '';
    }
  })
  .on('blur', function(e){
    // if the user leaves the field, change it back to the instructional text
    e.target.innerHTML = 'Click to enter New List Item';
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <ol class="editor">
    <li class="last-item" contenteditable=true>Click to enter New List Item</li>
   </ol>
</div>

Answer 3

您可以设置一个间隔，以根据需要修改Category元素的html，而不是在进行编辑时采取行动。

            <rule name="ReverseProxyInboundRule1" enabled="true" stopProcessing="true">
                <match url="(.*)" />
                <action type="Rewrite" url="http://localhost:26000/{R:1}" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^(app1\.application\.com)$" />
                </conditions>
            </rule>
            <rule name="ReverseProxyInboundRule2" enabled="true" stopProcessing="true">
                <match url="(.*)" />
                <action type="Rewrite" url="http://localhost:26001/{R:1}" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^(app2\.application\.com)$" />
                </conditions>
            </rule>
            <rule name="ReverseProxyInboundRule3" enabled="true" stopProcessing="true">
                <match url="(.*)" />
                <action type="Rewrite" url="http://localhost:26002/{R:1}" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^(app3\.application\.com)$" />
                </conditions>
            </rule>
            <rule name="ReverseProxyInboundRule4" enabled="false" stopProcessing="true">
                <match url="(.*)" />
                <action type="Redirect" url="http://www.google.com" redirectType="Temporary" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^(app4\.application\.com)$" />
                </conditions>
            </rule>

Answer 4

您好，您可能想检查一下，让我提醒您。而不是使用

lastchild.innerHTML

用

替换

nextSibling.innerHTML

喜欢

$('.editor' ).on('keydown .editable', function(e){
    if ( e.keyCode === 13 ) {
			
						
			var insertText = "<span>"+e.target.lastElementChild.innerText+"</span>";
			e.target.nextSibling.innerHTML = insertText;
			
			
			return true
		}
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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.nextSibling.innerHTML = insertText;
      return true
     }
    });

如何在Enter键上操作列表元素

4 个答案: