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>

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

score 0 · Accepted Answer

设法将一些东西放在一起，虽然不优雅，但可能对寻求简单、简单（肮脏！）解决方案的其他人有用。在我的 'designMode = 'on' 函数中，我添加了：

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

当您在 iFrame 中单击时，插入点位于空格和结束段落标记之间，只需稍微清理一下所需的服务器端。在 Chrome、Safari 和 Firefox 中测试，似乎都可以可靠地工作。还有其他建议吗？

1 回答 1