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>

有时，在修改编辑框中的其他来源（来自互联网，文字等）时，换行符显示为<p>。

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

first line of text<br>second line of text

我尝试在用户按下返回时更改<div>的行为;我知道代码正在运行，因为如果我尝试插入一个单词而不是返回它是有效的。但是，当我将代码设置为替换<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，您可以禁用用户不应使用的任何功能。

脚本在div contentEditable中插入换行符

1 个答案: