如何在使用designMode时默认为段落

Question

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

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

当我在iframe中输入文本时，它没有被任何标签包装。当我点击return时，新行被包装在一个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上进行了测试，似乎都能可靠地工作。还有其他建议吗?