Prevent users from pasting images into contenteditable-div

Question

I have a div, which is defined like this: <div contenteditable="true" id="call-text-form-textarea"></div> But I want to prevent the user, pasting images into it.

Is there a option, to prevent it with html? Or maybe I cloud JavaScript for this?

Answer 1

Try this:

<div contenteditable="plaintext-only" id="call-text-form-textarea"></div>

It has good support in 2025: https://caniuse.com/mdn-html_global_attributes_contenteditable_plaintext-only

Note: This will also strip the text formatting data from the content on the clipboard. If you want to preserve this behavior go with the javascript implementation instead:

document
  .getElementById('call-text-form-textarea')
  .addEventListener('paste', (e) => {
    if (e.clipboardData?.files?.length) {
      e.preventDefault();
    }
  });