The simplest solution is to use the mousedown
event instead and prevent the event's default action.
Retain contenteditable in edit mode even when clicked on another div
-
20-09-2022 - |
Domanda
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 ?
Soluzione
Altri suggerimenti
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
}