脚本在 div contentEditable 中插入换行符

Question

我有一个网页 div contentEditable=true。用户修改div的内容后，系统使用document.getElementById(id).innerHTML获取内容并发送给服务器。这一切都有效：

<div id='editBox'; contentEditable='true'></div>
<script>
document.getElementById('editBox').onkeydown=function(e){
    clearTimeout ( backupTimeoutID );
    backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
<script>

我使用带有 contentEditable=true 的 div 而不是文本区域的原因是我需要允许在 div 中显示和格式化背景色文本。如果我不知道有什么更好的方法，请告诉我。

我的问题是显示的换行符不一致。如果用户在 div 内按下 return，它会为换行符创建另一个 div。因此，当函数获取 innerHtml 时，它看起来像这样

first line of text<div>second line of text</div>

有时，在编辑框中粘贴来自其他来源（来自互联网、word 等）的文本时，换行符显示为 <p>。

我希望所有换行符看起来像这样：

first line of text<br>second line of text

我尝试在用户按下 return 时更改 <div> 的行为；我知道代码正在运行，因为如果我尝试插入一个词而不是 return，它就会运行。但是，当我将代码设置为 return 替换 <br> 时，它的行为很不稳定。这是我为此使用的代码：

<script>
document.getElementById('editBox').onkeydown=function(e){
    clearTimeout ( backupTimeoutID );
    backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
} else if ( pressedKeyCode==13 ) {
    e.preventDefault();
    document.execCommand("InsertHTML",false,"a"); // this works
    document.execCommand("InsertHTML",false,"<br>"); // I don't see the effects I want with this
}
<script>

转换多个换行符 – <div>、<p> 和 <br> – 似乎是一项艰巨的任务。使用 <br> 换行似乎不太容易出错。

我正在 FileMaker 中开发用于 Mac OSX 的 Web 查看器。所以，到目前为止，我比其他任何浏览器都更关心 Safari。

在此先感谢您的帮助。

Answer 1

驾驭contentEditable并非易事。不幸的是，它并没有真正标准化，每个浏览器都有其怪癖。

我建议您看看周围许多写得很好的 HTML 富文本编辑器。

例如，CKEditor only creates sensible, valid HTML, it allows you to configure what happens, when the user presses return, it can remove or replace any unwanted HTML并且您可以禁用用户不应使用的任何功能。

脚本在 div contentEditable 中插入换行符

Script insert line breaks in div contentEditable

html

javascript

css

line-breaks