E2 - Editor Elements - Context Menu Demo

Basic Context Menu

Right-click anywhere in the area below to see a basic context menu:

Right-click here for basic context menu

HTML Markup:

<e2-context-menu id="basic-menu" target="#basic-demo">
  <e2-context-menu-item
    label="Cut"
    icon="✂️"
    shortcut="Ctrl+X"
    value="cut">
  </e2-context-menu-item>
  <e2-context-menu-item
    label="Copy"
    icon="📋"
    shortcut="Ctrl+C"
    value="copy">
  </e2-context-menu-item>
  <e2-context-menu-item
    label="Paste"
    icon="📄"
    shortcut="Ctrl+V"
    value="paste">
  </e2-context-menu-item>
  <e2-context-menu-separator></e2-context-menu-separator>
  <e2-context-menu-item
    label="Properties"
    icon="⚙️"
    value="properties">
  </e2-context-menu-item>
</e2-context-menu>

Editor Area Context Menu

Right-click in the editor area for editor-specific actions:

This is a simulated editor area. Right-click here for editor-specific context menu options.

You can select text and right-click for text-specific actions.

HTML Markup:

<e2-context-menu id="editor-menu" target="#editor-area">
  <e2-context-menu-item
    label="Insert..."
    icon="➕"
    value="insert">
  </e2-context-menu-item>
  <e2-context-menu-item
    label="Find & Replace"
    icon="🔍"
    shortcut="Ctrl+H"
    value="find-replace">
  </e2-context-menu-item>
  <e2-context-menu-separator></e2-context-menu-separator>
  <e2-context-menu-item
    label="Format Document"
    icon="📐"
    shortcut="Shift+Alt+F"
    value="format">
  </e2-context-menu-item>
</e2-context-menu>

Disabled Items

Context menu with some disabled items:

Right-click here for context menu with disabled items

HTML Markup:

<e2-context-menu-item
  label="Available Action"
  icon="✅"
  value="available">
</e2-context-menu-item>
<e2-context-menu-item
  label="Disabled Action"
  icon="❌"
  value="disabled"
  disabled>
</e2-context-menu-item>

Sub-Menus

Context menu with nested sub-menus:

Right-click here for context menu with sub-menus

HTML Markup:

<e2-context-menu id="submenu-menu" target="#submenu-demo">
  <e2-context-menu-item label="Cut" icon="✂️" value="cut"></e2-context-menu-item>
  <e2-context-menu-item label="Copy" icon="📋" value="copy"></e2-context-menu-item>
  <e2-context-menu-item label="Paste" icon="📄" value="paste"></e2-context-menu-item>
  <e2-context-menu-separator></e2-context-menu-separator>
  <e2-context-menu-menu label="Format" icon="🎨">
    <e2-context-menu-item label="Bold" icon="💪" value="bold"></e2-context-menu-item>
    <e2-context-menu-item label="Italic" icon="📐" value="italic"></e2-context-menu-item>
    <e2-context-menu-item label="Underline" icon="⬇️" value="underline"></e2-context-menu-item>
    <e2-context-menu-separator></e2-context-menu-separator>
    <e2-context-menu-menu label="Advanced" icon="⚡">
      <e2-context-menu-item label="Strikethrough" value="strikethrough"></e2-context-menu-item>
      <e2-context-menu-item label="Superscript" value="superscript"></e2-context-menu-item>
      <e2-context-menu-item label="Subscript" value="subscript"></e2-context-menu-item>
    </e2-context-menu-menu>
  </e2-context-menu-menu>
  <e2-context-menu-menu label="Insert" icon="➕">
    <e2-context-menu-item label="Image" icon="🖼️" value="insert-image"></e2-context-menu-item>
    <e2-context-menu-item label="Link" icon="🔗" value="insert-link"></e2-context-menu-item>
    <e2-context-menu-item label="Table" icon="📊" value="insert-table"></e2-context-menu-item>
  </e2-context-menu-menu>
</e2-context-menu>

Programmatic Control

Show context menu programmatically:

JavaScript Example:

// Show context menu at specific position
const menu = document.getElementById('programmatic-menu');
const rect = button.getBoundingClientRect();
menu.show(rect.right + 10, rect.top);

// Hide context menu
menu.hide();

Output

Context menu events are logged here: