CODEWITHSUNDEEP
javascripthtmlcontenteditable
Bambax
Bambax

Reputation: 3010

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:

Upvotes: 30

Views: 25338

Answers (5)

Ali Faris
Ali Faris

Reputation: 18630

just an addition to the great answer by @Andy Hoffman

you can hide underlying styles as well

[contenteditable] u {
    text-decoration: none;
}

the final changes would be:

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

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

[contenteditable] img {
    display: none;
}

[contenteditable] u {
    text-decoration: none;
}

you can apply this to any element inside the contenteditable

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19109

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>

Upvotes: 24

lokhmakov
lokhmakov

Reputation: 207

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>

Upvotes: 6

Vedant Terkar
Vedant Terkar

Reputation: 4682

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.

Upvotes: 21

stslavik
stslavik

Reputation: 3028

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.

Upvotes: 10

Related Questions