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

formatBlock command does not overwrite existing block on list item

本文关键字：列表 命令 覆盖 formatBlock      更新时间：2023-09-26

请参阅http://jsfiddle.net/4aQtk/3/

我试图通过execcommand("formatBlock",...)来改变li的风格。它在普通段落节点上工作得很好，但在列表项上生成节点。

Firefox 27: OK，样式元素(p, h1, h2)仅在li元素中包裹文本。(预期)

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

Chrome 33: Failed, formatBlock命令将ul分解为几个ul，并将ul与样式元素包裹。

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

如何防止在其上创建节点?

如果你把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标签内放置一个新的ul。因为h1只是替换了div，所以就没有问题了。

我希望这对你有帮助。

编辑:

它在段落中起作用的事实是它只是用h1替换p标签，所以最好的方法应该是如果h1在段落中。

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

在包含当前选择的行周围添加一个HTML块样式的标签，替换包含该行的块元素(如果存在的话)(在Firefox中，BLOCKQUOTE是例外-它会包装任何包含的块元素)。要求将标记名称字符串作为值参数传入。几乎所有的块样式标签都可以使用(例如:"h1"，"p"，"dl"，"blockquote")。Internet Explorer只支持标题标签H1 - H6、ADDRESS和PRE，这些标签还必须包含分隔符<)

<li>元素表示一个项目列表，因此formatBlock命令将用Block元素(p, h1，…)将其包裹在列表中。因为li元素不允许这样做，所以列表被分成多个列表，并且"要格式化的列表"被Block元素包裹。

由于您的代码总是在li元素上触发，因此这是一次又一次地执行，因为您正在执行格式化命令，该命令不打算用于这类元素。@Steven Vanden Broucke发布了一个解决方案，如何避免这种情况。

由于没有明确规定如何处理，我建议这样做。

编辑:针对这个问题，我在chromium上创建了一个bug报告。(https://code.google.com/p/chromium/issues/detail?id=372925&thanks=372925&ts=1400009358)

相关文章：