Retain contenteditable in edit mode even when clicked on another div

Question

I recently found a simple rich-text editor on Mozilla developer network it has a editable div with image toolbar(for options like Bold etc.,) here is the full implementation of code.

It has image toolbar to change text inside the editable div but when I replace image with div or span or li etc., the onclick function which is formatDoc('bold') do not work! ie., the It only works when I replace div or span with img or button.

Here is my code jsbin showing div and img tags, only onclick of img is working.

Is there any way to retain the contenteditable div in edit mode while I run formatDoc('bold') on the selected text and not loose focus to clicked div ?

Answer 1

The simplest solution is to use the mousedown event instead and prevent the event's default action.

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

Answer 2

Apparently it does affect DIVs for some reason. While I didn't find a workaround for them - you can use a normal button for similar effect:

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

You can style the button as needed (e.g. to remove standard button appearance):

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

.hi:focus {
  outline:none
}

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