I'm adding a background to some selected text in a contenteditable element via document.execCommand('hiliteColor', false, '#d4ecff');
.
If the selected text contains some formatting tags (<b></b>
for instance), calling document.execCommand('removeFormat')
on the selection does not remove all the formats. It's like the background colour is passed to the text formerly encompassed into <b></b>
.
I'm facing the issue on Chrome (version 100.0.4896.75 - 64 bits) as well as Brave (version 1.37.111 Chromium: 100.0.4896.79 - 64 bits). Everything seems to work as expected on Firefox.
Here's a demo and steps to reproduce: https://jsfiddle.net/L82ogcf5/
PS: I know that the use of document.execCommand()
is no longer recommendended, so please do not point that out. It's irrelevant until the feature is really deprecated (we all know that is not going to happen anytime soon).
You're adding a hiliteColor! But then you want to Remove any format.
First the
<b>
tag will be removed, and only after a second click thehiliteColor
will be removed.What you want instead is:
Example:
PS: this technology is sadly about to go dead (OK, maybe not so soon because the so many applications that at this date are driven on
contenteditable
and the execCommand). Just because, introduced by IE, and with the rise of competitor browsers they all disagreed on the specs and it slowly became an unhandleable beast... with no replacement currently in active development or written specs, AFAIK.