DevExtreme HTML Editor - Custom Toolbar Dialogs

The DevExtreme HTML Editor ships with built-in toolbar dialogs designed to insert links and images. This example adds new dialogs to the toolbar using custom DevExtreme Popup-based components:

• Video dialog — inserts a video by URL or from a local file. Supports both embedded (YouTube/Vimeo) and native <video> playback.
• Link dialog — edits link text and URL in a custom popup with full format control.
• Emoji popover — inserts emoji characters from a popover.
• Markup popup — inspects raw HTML markup produced by the editor.

Our example also registers custom Quill blots for native <video> elements and wires up clipboard matchers so that pasted video links and iframes are automatically converted to the correct format.

Implementation Details

1. Add custom toolbar buttons using the widget: 'dxButton' item type and handle onClick to open the corresponding dialog:

{ widget: 'dxButton', options: { icon: 'video',  hint: 'Insert/Edit Video',  onClick: () => openVideoDialog()  } }
{ widget: 'dxButton', options: { icon: 'link',   hint: 'Insert Custom Link', onClick: () => openLinkDialog()   } }
{ widget: 'dxButton', options: { text: '😀',     hint: 'Insert Emoji',       onClick: () => openEmojiPopover() } }

2. In the onInitialized event handler, obtain the editor instance, register custom Quill blots for the native video playback, and read the current selection to pre-populate each dialog:

onEditorInitialized(event) {
  this.editorInstance = event.component;
  registerVideoBlots(this.editorInstance);
}

3. After a user confirms the operation via the dialog, apply changes using the Quill APIs:

• insertEmbed for video formats.
• insertText for link text.
• Always add a trailing newline.

// video
editorInstance.insertEmbed(index, embedType, url);
editorInstance.insertText(index + 1, '\n', {});
editorInstance.setSelection(index + 2, 0);

// link
editorInstance.delete(index, length);
editorInstance.insertText(index, text, formats);

4. Use customizeModules to configure clipboard matchers that intercept pasted <a>, <iframe>, and <video> elements and automatically convert them to the appropriate embed format.

Files to Review

• Angular
  • app.component.html
  • app.component.ts
  • video-dialog.component.ts
  • link-dialog.component.ts
  • emoji-popover.component.ts
  • clipboard-matchers.ts
  • video-blots.ts
• React
  • App.tsx
  • VideoDialog.tsx
  • LinkDialog.tsx
  • EmojiPopover.tsx
  • useVideoDialog.ts
  • useLinkDialog.ts
  • useEmojiPopover.ts
  • clipboardMatchers.ts
• Vue
  • App.vue
  • HomeContent.vue
  • VideoPopup.vue
  • LinkPopup.vue
  • EmojiPopup.vue
  • useVideoPopup.ts
  • useLinkPopup.ts
  • useEmojiPopup.ts
• jQuery
  • index.html
  • index.js
  • VideoPopupHelper.js
  • LinkPopupHelper.js
  • EmojiPopupHelper.js
• ASP.NET Core
  • Index.cshtml
  • _VideoPopup.cshtml
  • _LinkPopup.cshtml
  • _EmojiPopup.cshtml
  • VideoPopupHelper.js
  • LinkPopupHelper.js
  • EmojiPopupHelper.js

Documentation

• HTML Editor Overview
• HTML Editor — Toolbar
• Popup Overview
• HTML Editor Documentation

Does This Example Address Your Development Requirements/Objectives?

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