Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

formatBlock command does not overwrite existing block on list item

Please see http://jsfiddle.net/4aQtk/3/

I tried to change style of li via execcommand("formatBlock",...). It works well on normal paragraph nodes, but makes nodes on list items.

Firefox 27 : OK, style elements(p, h1, h2) wrapped just text in li element. (expected)

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

Chrome 33 : Failed, formatBlock command brake down ul into several uls and wrap ul with style elements.

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

How do I prevent creating nodes on them?

like image 257
lqez Avatar asked Mar 29 '14 01:03

lqez


1 Answers

If you wrap the contents of the li into a div it works fine.

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

An h1 tag isn't a valid child for an unordered list so it kind of wraps it outside the parent ul and puts a new ul inside the h1-tags. Because a h1 just replaces the div there is no problem anymore.

I hope this helped.

Edit:

The fact that it works with the paragraphs is it that it just replaces the p-tags with h1's so the best way should be if the h1's were inside the paragraphs.

like image 100
Steven Vanden Broucke Avatar answered Oct 14 '22 00:10

Steven Vanden Broucke