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

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.

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>

Tags:

Javascript

Html

Contenteditable

Recent Posts