Question

我尝试通过li更改execcommand("formatBlock",...)的样式。它适用于普通段落节点，但在列表项上创建节点。

Firefox 27：好的，样式元素（p，h1，h2）只包含li元素中的文本。（预期）

<ul>
    <li>
        <h1>text</h1>
    </li>
    <li>another text</li>
</ul>

Chrome 33：失败，formatBlock命令将ul制成几个ul并用样式元素包裹ul。

<h1>
    <ul>
        <li>
            text
        </li>
    </ul>
</h1>
<ul>
    <li>another text</li>
</ul>

如何阻止在其上创建节点？

Answer 1

如果您将 li 的内容包装到 div 中，则可以正常使用。

<ul>
    <li><div>list item 1</div></li>
    <li><div>list item 2</div></li>
    <li><div>list item 3</div></li>
</ul>

h1标签不是无序列表的有效子项，因此它将它包装在父ul之外并在h1-tags中放入新的ul。因为h1只是替换了div，所以不再有问题了。

我希望这会有所帮助。

修改

它与段落一起工作的事实是，它只是用h1＆替换p-tag，所以最好的办法应该是h1是在段落内。

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

在包含当前选择的行周围添加一个HTML块样式标记，替换包含该行的块元素（如果存在）（在Firefox中，BLOCKQUOTE是例外 - 它将包装任何包含块元素）。需要将标记名称字符串作为值参数传入。实际上可以使用所有块样式标签（例如，＆＃34; H1＆＃34;，＆＃34; P＆＃34;，＆＃34; DL＆＃34;，＆＃34; BLOCKQUOTE＆＃34;）。（Internet Explorer仅支持标题标记H1 - H6，ADDRESS和PRE，它们还必须包含标记分隔符＆lt;＆gt;，例如＆＃34;＆＃34;。）

<li>元素表示项目列表，因此formatBlock命令将使用块元素（p，h1，...）将其包装到列表中。由于li元素不允许这样做，因此将列表拆分为多个列表，并将＆＃34;列表格式化为＆＃34;用Block元素包装。

由于您的代码始终在li元素上触发，因此您会一次又一次地执行此操作，因为您正在执行formatingcomand，而不是要在此类元素上使用。 @Steven Vanden Broucke发布了一个解决方案，你怎么能避免这种情况。

由于没有明确说明应该如何处理，我建议这样做。

编辑：我为此问题创建了一个关于铬的错误报告。（https://code.google.com/p/chromium/issues/detail?id=372925&thanks=372925&ts=1400009358）

formatBlock命令不会覆盖列表项上的现有块

2 个答案: