34

<div contenteditable="true"> </div>当在 Firefox中按 enter 时<br />产生 - 没关系。但是在 Chrome 或 IE 中创建了一个新的<div>or <p>。我应该怎么做才能让 Chrome 和 IE 表现得像 Firefox 一样。

4

5 回答 5

29

正如 Douglas 之前所说，当客户在可编辑页面上开始新段落时，浏览器会尝试克隆先前的标签。当浏览器没有什么可以偏离时，就会出现差异 - 例如，当最初页面正文为空时。在这种情况下，不同的浏览器表现不同：IE 开始将每个字符串包装到 <p> 标签中，Chrome 将每一行包装在 <div> 中。

为了增加跨浏览器体验，WebKit 开发人员引入了DefaultParagraphSeparator命令。您可以在 Chrome 的页面加载时使用以下 JavaScript 将默认段落分隔符更改为 <p> 标记：

document.execCommand('defaultParagraphSeparator', false, 'p');
于 2013-03-18T17:10:16.703 回答
15

以下将<br>在所有主要浏览器中按下回车键并尝试将插入符号直接放在其后面时添加一个。但是，WebKit、Opera 和 IE 都存在将插入符号正确放置在 . 之后的问题<br>，以下代码不会尝试纠正这些问题。

function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }

        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

var el = document.getElementById("your_editable_element");

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keypress", enterKeyPressHandler, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeypress", enterKeyPressHandler);
}
于 2010-08-16T10:46:36.933 回答
8

优秀的参考资料位于 contenteditable 上。

http://blog.whatwg.org/the-road-to-html-5-contenteditable

这导致了一个非常好的 API http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/ http://dev.opera.com/articles/查看/rich-html-editing-in-the-browser-part-2/

如果您愿意花 30 分钟到一个小时来阅读所有这些内容，那么您绝对不必使用一些像 tinyMCE 或 ckeditor 之类的蹩脚的第三方编辑器，您可以自己构建和自定义它，坦率地说，这更容易并且从头开始比处理第三方所见即所得编辑器的所有笨拙和不必要的 API 更快。

于 2011-07-25T08:55:12.103 回答
3

如果您更喜欢快乐而不是追逐错误:-) 尝试让 FF 也使用 p 或 div 会更好。不仅仅是因为结果证明是多数票:-)

原因是，如果您用 XML 的眼睛查看标签（它注入混合数据模型 - 就像在不受标签保护的文本中一样），单独的 br 是非法的，并且趋势已经多年（所有浏览器）趋于完整XML 化。

根据您的实际应用程序，可能值得尝试放置一个具有完全形成的样式并且肯定带有一些初始内容的 div - 如果您看到页面显示灰色文本，例如“在此处输入您的评论”并且它消失了您的第二个点击进入它（或remians - 这是一个设计决定）。

这部分的原因是“contenteditable”的语义是“它已经有内容 => 浏览器有足够的信息来知道该做什么”所以当浏览器在没有内容的情况下尽其所能做某事时，它会使情况变得很多更随机。

于 2010-08-17T20:43:52.817 回答
2

我相信，如果 div 里面已经有一个段落标签，并且用户在焦点位于该段落标签内时按下返回，那么 Firefox 将插入另一个。所以，如果你有这个：

<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

而你的焦点，按下回车，火狐会插入第三段。

您可以& nbsp ;通过给它们指定最小高度来绕过在段落中的标签，并且您也许可以只使用一个。上次我看到这个时，我从来没有对行为的底部感到满意。您可能需要一些 JavaScript 来强制在 div 中至少包含一个段落标记。

于 2010-08-16T08:41:00.433 回答