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.

Update : Added pasted image suppression.

[contenteditable] {   background: #eee;   width: 15rem;   height: 4rem;   padding: 1em; }  [contenteditable] b {   font-weight: normal; }      [contenteditable] i {   font-style: normal; }  [contenteditable] img {   display: none; }

<div contenteditable></div>