Context menu

优质

小牛编辑

124浏览

2023-12-01

The context menu is a configurable component that appears when the user right clicks in the editable area. By default it does not disable the operating system’s native context menu, if there are no items to display at the cursor position the native context menu will be shown.

The context menu supports both individual menu items and dynamic context menu sections.

Live example

TinyMCE HTML JS Edit on CodePen

<textarea id="context-menu">
  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <p>
    Please try out the features provided in this basic example.<br>
    Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.
  </p>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="text-align: center;">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

tinymce.init({
  selector: 'textarea#context-menu',
  height: 500,
  plugins: [
    'link image imagetools table spellchecker'
  ],
  contextmenu: "link image imagetools table spellchecker",
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

Options

contextmenu

The contextmenu option allows you to specify which items appear on the context menu. The format of this option is a space separated list of items in a string.

The context menu option accepts three styles of item:

Any registered menu item.
A "|" pipe character to indicate a separator should be added to delineate a group of menu items.
Context menu sections defined by a plugin (usually equal to the plugin name). Separators are automatically inserted between context menu sections.

If the same name is registered as both a context menu section and a menu item, the section takes preference.

The default configuration includes all plugins that provide a context menu; link, image, imagetools, table, and spellchecker.

Type: String

Default configuration example

tinymce.init({
  selector: "textarea",
  contextmenu: "link image imagetools table spellchecker"
});

Further examples of the contextmenu option are available in the context menu examples.

contextmenu_never_use_native

The contextmenu_never_use_native option allows you to disable the browser’s native context menu from appearing within the editor.

Caution: Using this option may result into unexpected behavior when right-clicking in text areas. We advise you to consider all your options carefully before using this feature.

Type: Boolean

Default Value: false

Example

tinymce.init({
  selector: "textarea",
  contextmenu_never_use_native: true
});

Registering context menu sections

The structure of context menu sections is a simple query system indexed by name. We strongly recommend using the name of the plugin as the context menu name for ease of configuration.

In the menu shown to the user, sections are delineated by separators. Sections can return an empty array of menu items to indicate that section has no applicable items to the current context and should not be shown.

type ContextMenuApi = {
  update: (element: Element) => string | Array<ContextMenuContents>
}

editor.ui.registry.addContextMenu(name: string, feature: ContextMenuApi);

Every time the user opens the context menu, the selected element is passed to the update function which must return either a space separated string or an array of items to display. The types of the items returned are as follows:

type ContextMenuContents = string | ContextMenuItem | SeparatorMenuItemApi | ContextSubMenu

type ContextMenuItem = {
  type?: 'item';
  text: string;
  icon?: string;
  onAction: () => void;
}
type ContextSubMenu = {
  type: 'submenu';
  text: string;
  icon?: string;
  getSubmenuItems: () => string | Array<ContextMenuContents>;
}

type SeparatorMenuItemApi = {
  type: 'separator'
}

The most common type to use is string, which references an existing registered menu item.

ContextMenuItem, ContextSubMenu and SeparatorMenuItemApi types are intended for use by plugins with completely dynamic menu requirements, where registering each menu item is not necessary. For example, the spellchecker shows a list of suggestions specific to the selected word.

When creating a dynamic menu, the structure type properties are used in order to support untyped API usage:

type item (default) is a regular menu item, and must have an onAction method.
type submenu must have getSubmenuItems, and if it has an onAction property it is ignored.
type separator ignores all other properties.

Defining a context menu section

This example shows how the image plugin dynamically adds the standard image menu section to the context menu. The image context menu section is empty unless the selected element is an image.

TinyMCE HTML JS Edit on CodePen

<textarea id="contextmenu-section">
  <p>Right click on the example image below will show the newly configured context menu.</p>

  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>
  <p>Right Clicking on text should not invoke the context menu</p>
</textarea>

tinymce.PluginManager.add('my-example-plugin', function (editor) {
  editor.ui.registry.addMenuItem('image', {
    icon: 'image',
    text: 'Image',
    onAction: function () {
      console.log('context menu clicked');
      alert('context menu clicked');
    }
  });

  editor.ui.registry.addContextMenu('image', {
    update: function (element) {
      return !element.src ? '' : 'image';
    }
  });
});

tinymce.init({
  selector: "textarea#contextmenu-section",
  contextmenu: "image",
  plugins: 'my-example-plugin'
});