Is it possible to disable or control "commands" in contentEditable elements?

Question

As I understand it, an element with contentEditable="true" is some kind of WYSIWYG HTML editor. It generates relevant HTML tags corresponding to the command issued.

For example, if one selects text and then presses Ctrl+B, the selected text is placed between <b></b> tags.

I need to have no style tags in the resulting text. How does one suppress, hijack or control the behavior of those commands?

Other things I could do:

• Filter out the tags after the fact; but then the user will think they have put things in bold when they really haven't
• Re-style the tags so that they don't show, and then filter them out; but there's a chance I might forget one, or that somehow the stylesheet is disabled
• Not use contentEditable at all but a textarea instead. But among other things, contentEditable makes it really easy to highlight the paragraph that is being edited. That's much more difficult to do with a textarea.

Answer 1

Rather than trying to suppress the unwanted tags via JavaScript, I just style them away and save/restore the un-styled text in the contenteditable region:

[contenteditable] {
  background: #eee;
  width: 15rem;
  height: 4rem;
  padding: 1em;
}

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}

<div contenteditable></div>