contentEditable - Firefox <br /> 标签答案

【问题标题】：contentEditable - Firefox <br /> tagcontentEditable - Firefox <br /> 标签
【发布时间】：2011-08-08 00:21:06
【问题描述】：

Firefox 在按下回车键时插入 <br /> 标签，而其他浏览器则添加 <p> 或 <div>。我知道 chrome 和 safari 正在插入 contentEditable div 的 firstchild 的相同标签。但是，Firefox 也是如此，如果第一个标签的 innerHTML 为空，Firefox 只是忽略该标签并通过在第二行中推送默认节点来创建新行，并直接在编辑器内部而不是在子节点内部写入。所以基本上，我希望 Firefox 在给定的标签内写入，并在每次按下输入时继续插入那种节点。如何做呢？有什么建议？

【问题讨论】：

请添加您的解决方案作为答案。
我会，但我必须等待 24 小时 :)

标签： javascript firefox contenteditable enter

【解决方案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;";
    }
}

【讨论】：

我也只是想推荐一个讨厌的小 IF 浏览器解决方案。谢谢！
@TheBlackBenzKid 很高兴它有帮助:)

【解决方案2】：

尝试在您的元素中插入<p></p>。那么几乎可以肯定，每个换行符都会是一个新段落。

【讨论】：

这就是我所说的，但是当
内部为空或用户点击第一个键时，Firefox 会忽略它
我找到了解决方案。首先，当页面加载时，请遵循以下步骤： 1）如果有焦点在 contenteditable div 上，则将其聚焦。 2）如果您的文本编辑器没有初始标签，请插入您想要的任何内容，<p> 或 <div> 标签或其他任何内容。现在每当用户删除所有内容时，文本编辑器都会自动创建一个<p> 标签。因此，基本上，当您在 Firefox 中关注页面加载时，会发生错误，而当您不这样做时，则不会:) 希望那些遭受相同错误的人会喜欢
@Shaokan 有趣。秘密可能是carret（光标的编辑点）在默认情况下在第一个标签之前启动。当您将其聚焦（或在需要时取消聚焦并聚焦）时，carret 将放置在第一个元素内（如果可能）。 - 有趣的问题：当您在可编辑元素中有<div><p></p></div> 时会发生什么。光标会放在p 标签的前面还是里面？ :)
如果您在页面加载时将焦点放在编辑器上，那么插入符号将放在 div 前面。否则，如果您让用户集中注意力，那么它将集中在
标记内。然而，每当你按下回车键时，

标签将被放置在

标签内。因此，我猜 Firefox 正在插入与最深节点相同类型的节点，并且对树的其余部分不感兴趣。

【解决方案3】：

如果您将 contenteditable 元素更改为 <span> 而不是 <div>，则新行将使用 <br>。我没有用其他元素对此进行过测试，但是看看不同元素的行为会很有趣。

<span> 元素可以用display: block 设置样式，使其看起来像<div> 元素。

【讨论】：