如何在使用designMode

Question

我正在尝试使用designMode / execCommand创建一个非常简单且轻便的所见即所得编辑器，例如：

$(document).ready(function() {
    wysiFrame.document.designMode = 'On';
});
<iframe name="wysiFrame" id="wysiFrame"></iframe>

当我在iframe中输入文字时，它不包含在任何标签中。当我点击返回时，新行被包裹在div中，例如：

here's my bit of text
<div>and this is the text after hitting return</div>

如果我添加：

$('#wysiFrame').contents().find("body").append('<p>Select me and type</p>');

然后选择文字和覆盖类型标签会按预期添加（至少在Chrome中），新段落和换行符。

我试过了：

$('#wysiFrame').contents().find("body").append('<p></p>');

但那给了我：

My typed text
<p></p>

有没有办法在段落标签中包装输入的文字？我已经在网上搜索过，但只能找到防止换行符以支持段落标记的参考。 欢迎所有帮助，建议和想法。 提前谢谢。

Answer 1

管理得到一些东西，虽然不优雅可能对其他寻找一个简单（脏！）解决方案的人有用。在我的'designMode ='on'函数中，我添加了：

$('#wysiFrame').contents().find("body").append('<p>&nbsp;</P>');

当您在iFrame中单击时，插入点落在空间和结束段落标记之间，只需要一点清理就需要服务器端。在Chrome，Safari和Firefox中进行测试，似乎可靠地运行。 还有其他建议吗？