脚本在 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

我尝试在用户按下返回时更改<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 中的 Web 查看器进行开发，以便在 Mac OSX 中使用。所以，到目前为止，我比任何其他浏览器都更关心 Safari。

提前感谢您的帮助。

Answer 1

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

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

例如，CKEditor 只创建合理、有效的 HTML，它允许您配置 what happens, when the user presses return，它可以配置 remove or replace any unwanted HTML，并且您可以禁用任何用户不应该使用的功能。