Javascript 脚本在div contentEditable中插入换行符

我有一个网页

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>

document.getElementById（'editBox'）.onkeydown=function（e）{
clearTimeout（backupTimeoutID）；
backupTimeoutID=setTimeout（函数（）{sendDivContentToServer（）}，3000）；
}

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

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

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

第一行文本第二行文本

有时，在编辑框中粘贴来自其他来源（来自internet、word等）的文本时，换行符显示为

我希望所有换行符都如下所示：

first line of text<br>second line of text

第一行文本
第二行文本

每当用户按下return键时，我都尝试更改

的行为；我知道代码正在工作，因为如果我尝试插入一个单词而不是返回它，它就会工作。但是，当我将代码设置为用return代替

时，它的行为不规则。这是我使用的代码：

<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>

document.getElementById（'editBox'）.onkeydown=function（e）{
clearTimeout（backupTimeoutID）；
backupTimeoutID=setTimeout（函数（）{sendDivContentToServer（）}，3000）；
}
}否则如果（按KeyCode==13）{
e、 预防默认值（）；
document.execCommand（“InsertHTML”，false，“a”）；//这很有效
document.execCommand（“InsertHTML”，false，
”；//我看不到我想要的效果
}

转换多个换行符——

、

和

——似乎是一项艰巨的任务。对换行符使用

似乎不太容易出错

我正在为FileMaker中的web查看器进行开发，以便在MacOSX中使用。到目前为止，我最关心的是Safari，而不是其他浏览器

---

提前感谢您的帮助。

控制

contentEditable

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

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

---

例如，仅创建合理、有效的HTML，它允许您进行配置，它可以并且您可以禁用用户不应该使用的任何功能。

请参阅中的

insertBrOnReturn

。另一种方法是让它们保持原样，并使用已实现的解析器将它们解析为字符串。。。您正在做的是在浏览器上进行部分解析，在服务器上进行部分解析。。。如果你没有任何好的理由，就不要玩解析。@teemu不工作。我读过

insertBrOnReturn

是Mozilla特有的。事实上，我也应该读到这一页的结尾。@Sachin这是可能的；问题是FileMaker没有一个好的解析器（我知道）。到目前为止，我几乎都是自己制作解析器的，而且，除其他问题外，解析时间太长。如果我能在浏览器中更好地组织它，那么在服务器上工作就会更好。我不是javascript和html的高手。你认为和这个编辑一起工作，让它像我需要的那样工作，需要这些学科的专业知识吗？我更倾向于noob一方。使用CKEditor肯定比自己扩展

contentEditable

需要更少的专业知识，而且CKEditor有很好的文档，但我很难判断它对初学者来说是可以理解的。您可以尝试打开一个新问题，描述您在使用

可编辑内容时的具体操作，特别是您（或用户？）设置背景色的原因和方式。我相信有人可以帮助您配置CKEditor，或者找到更好/更简单的方法来实现您的目标。我非常感谢您的帮助。如果我找不到其他方法，我可能会这样做。需要背景色；用户非常明确，他希望能够“用各种颜色突出显示”，并再次编辑文本。这是一条路要走。我的编辑棒极了！谢谢