在 contenteditable div 中显示空 标签的解决方法是什么？答案

【问题标题】：What is a work around for displaying empty tags inside contenteditable div?在 contenteditable div 中显示空 标签的解决方法是什么？
【发布时间】：2013-04-05 20:21:33
【问题描述】：

这仅适用于 Internet Explorer。
我有一个内容可编辑的 div，我的用户可以在其中输入丰富的内容（nicEditor）。

我具有使用预定义模板设置 div 的 html 的功能。理想情况下，我希望我的模板是这样的。

<p><b>My Heading1</b></p>
<p></p>
<p></p>
<p><b>My Heading2</b></p>
<p></p>
<p></p>
<p><b>My Heading3</b></p>
<p></p>
<p></p>

渲染的地方

我的标题1
空白行
空白行
我的标题2
空白行
空白行
我的标题3
空白行
空白行 em>

然而它的渲染是这样的。

我的标题1
我的标题2
我的标题3

我尝试使用这些代替，但它们都存在问题。
&nbsp;、&nbsp; - 每行始终有一个空格。
  - 当用户开始输入出现新行。
 、  - 用于间距，除非用户使用插入列表命令之一。所有内容都放在一个列表项下。

我该怎么做才能让我的  标签显示在我的 div 中？

【问题讨论】：

P 元素的行高是多少？您也可以尝试进行正则表达式替换，例如 text = text.replace(/
/gim, '
');
@Vibhu 由于用户尝试插入列表时的问题，我不能单独使用  标签。
我试过&nbsp;，它工作正常jsfiddle.net/kevinPHPkevin/nYmHJ
尝试使用在p的
@Kev 我在其他浏览器中尝试过，我也得到了它们每一行的空间。这是在 contenteditable div 中。

标签： html internet-explorer contenteditable nicedit

【解决方案1】：

我已成功使用&#8203; 零宽度空格字符。但是，这使得如果用户希望删除一行，他们必须按两次退格键。我将提出一个新问题来解决这个问题。
Here

【讨论】：