devexpress-examples / devextreme-html-editor-prevent-inserting-images

This example demonstrates how to avoid pasting images.

DevExtreme HTML Editor - How to prevent end-user image insertion (drag-drop and paste)

You can configure allowed MIME image types and prevent users from inserting images into the DevExtreme HTML Editor component (disable drop and paste operations).

onInitialized(e) {
    const Uploader = e.component.get('modules/uploader');
    class DisabledUploader extends Uploader {
        constructor(quill, options) {
            // Define empty array to prevent any image type from being pasted or dropped
            super(quill, { ...options, mimetypes: [] });
        }
    }
    e.component.register({ 'modules/uploader': DisabledUploader });
    },

Note: In this instance, you cannot use drag-and-drop, the paste command, and the base64 image uploader to upload local files. You can only add images using server upload mode.

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • Home.vue
• React
  • App.tsx
• NetCore
  • Index.cshtml

Documentation

• HtmlEditor - imageUpload

More Examples

• HtmlEditor Overview Demo

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)