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

中的每一行.

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

标记:

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

2> Tim Down..：

---

以下内容将添加一个
在所有主流浏览器中按下回车键并尝试将插入符号直接放在其后.但是,WebKit,Opera和IE都在将插入符号正确放置后会出现问题,
以下代码不会尝试更正.

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("
");
                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);
}

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.

---

我强烈反对这一点.除非您的要求非常基本,否则TinyMCE和CKEditor等优秀的现成编辑器之一将比快速组装的自制解决方案做得更好.开发WYSIWYG编辑器的困难可能并不明显,但我可以向您保证它们存在并且是严肃的.