内容可编辑 - Firefox <br /> 标签

Question

Firefox 在按 Enter 键时插入

<br />

标签，而其他浏览器则添加

<p>

或

<div>

。我知道 chrome 和 safari 正在插入 contentEditable div 的第一个子元素的相同标签。 Firefox 也是如此，但是，如果第一个标签的innerHTML 为空，则 Firefox 只是忽略该标签并通过在第二行中推送默认节点来创建新行，并直接在编辑器内写入而不是在子节点内写入。所以基本上，我希望 Firefox 在给定的标签内写入，并继续在每次按 Enter 时插入这种节点。如何做呢？有什么建议么？

Answer 1

我找到了解决方案:) 为了使这项工作有效，您必须为插入符的父元素提供一个 id。然后你可以使用下面的代码。请注意，我从 c# 获取 browsernName 并将其放入隐藏字段中。这就是为什么我将其等同于“firefox”。以下代码在FF 3.6上测试，完美运行。唯一的事情是，您必须检查插入符号的父元素，如果它不等于当前行的 id，那么您必须使用选择函数将插入符号放置在当前行内。另外，在 keyup 事件上执行此代码，并确保如果您在 keyup 事件上执行其他一些代码，请将此代码放在其末尾！无论如何，享受吧:)

// The code works good in the following cases:
// 1) If there is text inside the editor and the user selects the whole text
//    and replace it with a single character, the <p> tag will be placed and the
//    text will place inside the p tag
// 2) If the user selects the whole code and deletes it and begins to type again
// 3) If the user types normally and press enter 
// NB: Please note me if you find any bug

if (browserName == "firefox") {
    //remove all br tags
    var brs = txteditor.getElementsByTagName("br");
    for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
    //check whether there is a p tag inside
    var para = txteditor.getElementsByTagName("p");
    if (para.length == 0) {
        var inner = txteditor.innerHTML.replace(/^\s+|\s+$/g, '');
        var str = (inner == "") ? "&#8203;" : txteditor.innerHTML;
        var nText = "<p id=\"" + cRow + "\">" + str + "</p>";
        // in order to prevent a dublicate row clear inside the text editor
        txteditor.innerHTML = "";
        document.execCommand('insertHTML', false, nText);
    } else {
        // always make sure that the current row's innerHTML is never empty
        if (document.getElementById(cRow).innerHTML == "")
            document.getElementById(cRow).innerHTML = "&#8203;";
    }
}

Answer 2

尝试在元素内插入

<p></p>

。那么几乎可以肯定每个换行符都会是一个新段落。

Answer 3

如果将 contenteditable 元素更改为

<span>

而不是

<div>

，则新行将带有

<br>

。我还没有用其他元素对此进行测试，但看看不同元素的行为方式会很有趣。

可以使用

<span>

设置

display: block

元素的样式，使其看起来像

<div>

元素。

Answer 4

我遇到了类似的问题，导致 Firefox 中出现额外的

<br>

，但没有找到任何

<p>

或

<div>

。当内容为空或按空格后插入

<br>

。

无论如何，我尝试通过 MutationObserver API 来解决它。它工作得并不完美，但我未能找到满足我要求的其他解决方案。

if (navigator.userAgent.includes('Firefox')) {

    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        // when a <br> inserted
        if (mutation.addedNodes.length === 1 && mutation.addedNodes[0].tagName === 'BR') {
          // if at the beginning, remove it
          if (mutation.previousSibling === null) return mutation.addedNodes[0].remove()
          // or if after a space, remove it and add a space
          // since it seems Firefox need the <br> to keep that space
          if (mutation.previousSibling.nodeValue?.endsWith(' ')) {
            mutation.target.insertAdjacentText('beforeend', ' ')
            mutation.addedNodes[0].remove()
          }
        }
      })
    })

    observer.observe(contentEditableDiv, { childList: true })

}

副作用：

• 必须输入两次才能添加新行，或者有时需要添加空格
• 无法将内容换行

该问题也被提及为 Firefox 问题跟踪器中的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1615852

可能有帮助的摘录：

<br>

元素在以下情况下是必需的：

• 块元素是空的，以便使它们的高度非零并放置第一行以获得良好的插入符位置
• 文本以可折叠的空白结尾，以使其可见