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

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, contentE开发者_Python百科ditable makes it really easy to highlight the paragraph that is being edited. That's much more difficult to do with a textarea.

---

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>

---

I know it is too late, but if it can help some one It should worth give a try.

Here is how I handled it in javascript, to disable the ctrl+Command(ctrl+B,ctrl+Any Key), I've used:

HTML:

<div id="xyz" onKeyDown="return disable(this,event);" contentEditable="true">
This is my Rich Text Editor
</div>

JavaScript:

function disable(x,e){
    if(e.ctrlKey){ // .ctrlKey tells that ctrl key was pressed.
    return false;
    }
return true;
}

DEMO

---

But this will also affect the default way of doing copy+paste using ctrl+C and ctrl+V. If you want to maintain all the default functionality except for special cases like: ctrl+B(Bold), ctrl+i(italics) and ctrl+u(Underline), then it is better to use switch case statements on keyCode values like:

function disable(x,e){
   var ret=true;
    if(e.ctrlKey){
        switch(e.keyCode){
            case 66: //ctrl+B or ctrl+b
            case 98: ret=false;
                     break;
            case 73: //ctrl+I or ctrl+i
            case 105: ret=false;
                      break;
            case 85: //ctrl+U or ctrl+u
            case 117: ret=false;
                      break;
        }
    }
    return ret;
} // This will work fine for ctrl+c and ctrl+v.

DEMO

---

Now this will work fine for the default functionality of doing copy+paste but will restrict others like bold, italics and underline.

---

EDIT

As Betty_St Suggested, To make this work on Mac You need to replace:

if(e.ctrlKey){

with

if(e.ctrlKey || e.metaKey){ // Coz You'll be using CMD key on mac

Then That Might work on Mac OS.

Note: I've not dealt with Mac previously, So I don't know whether that is right way of doing or not.

---

Hope it helps :). Cheers.

---

Probably the best landing page resource for contentEditable is here:

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Basically, what it boils down to is this: You can not reconfigure the key codes themselves – they always exist, and they're different depending on localizations of browsers.

However, you can intercept the keyboard commands using JavaScript, an example of which can be seen here:

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

I've been playing around with contentEditable lately with mixed success. Some things just tend to work better than others, and have mixed results across browser. If all you really want is an editor for contentEditable block elements, try taking a look at aloha editor.

---

In React we use next code to disable all except Copy / Paste and move commands:

const onKeyDown = (e) =>
  e.ctrlKey || e.metaKey
  && ![`c`, `v`, `ArrowLeft`, `ArrowRight`].includes(e.key)
  && e.preventDefault()

const App = props => (
  <div
    contentEditable
    suppressContentEditableWarning
    
    onKeyDown={onKeyDown}    
  >
    12345
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>