I faced the same problem when I built up Froala Editor (https://froala.com/wysiwyg-editor). It happens because you loose the selection when you click the surroundings. Placing a button inside the <li>
will solve the problem. Just make sure the button fits the entire <li>
.
See http://jsfiddle.net/xdCjD/2/
In HTML:
<div id="apt-wysiwyg">
<ul>
<li class="wysiwyg-b" title="Bold"><button><img src="images/icons/black/png/font_bold_icon&16.png"></button></li>
</ul>
</div>
In CSS, remove the padding from li and set it to the button
#apt-wysiwyg li button {
padding: 5px;
height: 30px;
width: 30px;
background: transparent;
border:none;
}