如何在各种浏览器中输入后更改contenteditable块的行为

Question

当<div contenteditable="true"> </div>在Firefox中按下输入时<br />产生 - 这没关系.但在Chrome或IE中新增<div>或<p>创建.我应该怎么做才能使Chrome和IE的行为像Firefox一样.

Answer 1

正如道格拉斯先前所说,当客户在可编辑页面上开始新段落时,浏览器会尝试克隆以前的标记.当浏览器没有任何离开时 - 例如,当最初页面主体为空时,就会出现差异.在这种情况下,不同的浏览器表现不同:IE开始将每个字符串包装到<p>标签中,Chrome包装<div>中的每一行.

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

document.execCommand('defaultParagraphSeparator', false, 'p');

Answer 2

以下内容将添加一个<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);
}

Answer 3

优秀的参考资料在这里可以满足.

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/视图/富HTML -编辑-内式浏览器的部分-2 /

如果你愿意花30分钟到一个小时阅读所有这些,你绝对不必使用像tinyMCE或ckeditor等任何蹩脚的第三方编辑器,你可以自己构建和定制它,坦率地说,它更容易并且更快地从头开始,而不是处理第三方WYSIWYG编辑器的所有残缺和不必要的API.

Answer 4

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

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

当你集中注意力时，按回车键，Firefox 将插入第三段。

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