Сохранять контент в режиме редактирования даже при нажатии на другой div

Question

Недавно я нашел простой редактор с расширенным текстом на Mozilla developer network, он имеет редактируемый div с панелью изображений (для таких опций, как Bold и т. Д.), Здесь представлена ​​полная реализация code.

имеет панель инструментов изображения, чтобы изменить текст внутри редактируемой DIV, но когда я заменить изображение с div или span или li и т.д., в onclick функции, formatDoc('bold') не работают! т.е. Он работает только тогда, когда я заменяю div или span на img или button.

Это мой код jsbin, показывающий div и img теги, работает только onclick img.

Есть ли способ сохранить контент-доступный div в режиме редактирования, пока я запускаю formatDoc('bold') по выбранному тексту и не теряю фокус, чтобы щелкнуть div?

Answer 1

Самым простым решением является использование mousedown событие, а и предотвратить действие мероприятия по умолчанию.

Демо: http://jsbin.com/IZOzAKim/1/edit

Answer 2

По какой-то причине он действительно влияет на DIV. В то время как я не нашел обходной путь для них - вы можете использовать обычную кнопку для подобного эффекта:

<button class="hi" onclick="formatDoc('bold');"> bold </button> 

Вы можете стилизовать кнопку в случае необходимости (например, для удаления стандартного вида кнопки):

.hi{ 
    cursor:pointer; 
    border: none; 
    background: inherit 
} 

.hi:focus { 
    outline:none 
} 

Demo:http://jsbin.com/IDIJoCU/1/edit