contenteditable - 选择2个子段落并写入文本(Firefox Issue)

Question

我已经在Google上搜索了一个多星期了,我一直在尝试实施不同的解决方案,但没有成功,而且这让我感到害怕.

所以你有一个具有多个段落(或同类的其他子元素)的contenteditable div.显然这是你想要保持的那种布局.如果用户选择两个或多个段落并在其上键入文本,则会删除段落并在父div中设置插入符号焦点:

body {
  font-family: georgia;
}
.editable {
  color: red;
}
.editable p {
  color: #333;
}
.editable span {
  color: limegreen !important;
}

<div class="editable" contenteditable><p>paragraph one</p><p>paragraph two</p></div>

<hr>
  
<p>How to reproduce the bug:</p>
<ul>
  <li>Focus the contenteditable above by placing the cursor somewhere in one of the two paragraphs.</li>
  <li>press ctrl-a (in windows or linux) or cmd-a (in osx) to select-all</li>
  <li>type some text</li>
  <li>red text means that the text went directly inside the contenteditable div, black text means it went inside a paragraph</li>
</ul>
  
<p>The correct behaviour should be that that select-all and delete (or "type-over") in a contenteditable with only block tags should leave the cursor inside the first block tag.</p>
  
<p>Webkit gets this right, Firefox gets it wrong.</p>

我在Jquery尝试过类似的东西:

$(document).on('blur keyup','div[contenteditable="true"]',function(event){
    var sel = window.getSelection();
    var activeElement = sel.anchorNode.parentNode;
    var tagName = activeElement.tagName.toLowerCase();
    if (!(tagName == "p" || tagName == "span")) {
        console.log('not on editable area');
        event.preventDefault();
        //remove window selection
        var doselect = window.getSelection();
        doselect.removeAllRanges();
    }
});

因此,在对于contenteditable的模糊或键盘事件后,检测插入位置以及它是否在可接受的可编辑区域之外停止事件或某事？

我已经尝试改变选择范围,以及其他一些东西,但也许我只是没有看到它.我确信很多人都有同样的问题,但我在谷歌或这里找到的唯一答案是"内容可编辑糟透了","为什么你不只是使用开源编辑器"和那种东西.

Firefox奇怪的行为:在断行上插入BR标记 我也尝试用一个函数删除<BR>Firefox '怪异的行为,删除firefox自动插入的所有标记.像这样:

function removeBr(txteditor) {
    var brs = txteditor.getElementsByTagName("br");
    for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
}

所以我将它附加到一个keydown事件,并且它完全符合预期,但是这会导致更奇怪的行为(比如阻止在所选段落上添加空格).

请将问题投票,以便我们提高认识.

我相信很多其他人都遇到了同样的问题,我想知道是否有解决方法或任何"正确"的方法来做这件事会很好.我认为应该真的讨论......

Answer 1

发生的情况是这样的，当您选择两组文本并删除它们时，您也会删除可编辑元素中的所有标签。因此，您实际上<p>从 div 中删除了标签，然后唯一要写入的内容就是 div 本身。

为什么需要两个单独的段落标签？单独拥有 div 会更容易...而不是将 div 设置为可编辑，您是否尝试过将标签设置<p>为<p contenteditable="true">