javascript - 将 contenteditable 和覆盖换行符设置为 而不是 在元素末尾不起作用

Question

我在 jsFiddle.net 中做了一个简单的脚本 这说明了我的问题。

我尝试覆盖 contenteditable=true 中的换行符来自默认 <div> 的元素到 <br />使用以下脚本:

$(".editContents").on("keydown","[contenteditable=true]",function(e) {
    if(e.which===13) {
        lineBreak = "<br />";
        document.execCommand("insertHTML",false,lineBreak);
        return false;
    }
});

如果您按 enter，它会正常工作在文本中 - 但是一旦您尝试在段落末尾换行，什么也不会发生。

不幸的是，我不知道它有什么问题。热烈欢迎任何帮助:-)

Answer 1

它实际上正在工作并插入一个 <br />在 <p> 的末尾, 但在 <p> 末尾有空格元素被 chop 。在段落末尾按回车键后，您可以通过检查元素来看到这一点。问题是，在 <p> 的末尾, execCommand()只允许插入一个。不是插入，而是替换。

如果您向 '<br />' 添加另一个字符，它确实有效并插入这个 '<br /> ' (> 之后的空格)，但这可能不是您要查找的内容，因为它实际上为您的 <p> 添加了一个额外的空间。 .

您可能需要检查它是否是最后一个字符并使用 insertAdjacentHTML()与 beforeEnd相反。