13

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

4

3 回答 3

4

我找到了解决方案:) 为了完成这项工作，您必须为插入符号的父元素提供一个 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;";
    }
}
于 2011-04-19T19:26:57.263 回答
2

<p></p>尝试在元素内插入 a 。然后几乎可以肯定每个换行符都是一个新段落。

于 2011-04-18T15:58:44.600 回答
0

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

可以对<span>元素进行样式设置display: block，使其看起来像一个<div>元素。

于 2020-08-03T09:58:32.643 回答