键盘快捷键

添加的自定义快捷键若与现有的 TinyMCE 或浏览器快捷键发生冲突，将覆盖现有快捷键。

要为 TinyMCE 添加自定义键盘快捷键，请使用以下两种方式之一：

• The tinymce.Editor.addShortcut API。

• The tinymce.Shortcuts.add API。

快捷键修饰键映射关系

创建 TinyMCE 快捷键时，可使用以下修饰键。根据用户操作系统的不同，某些修饰键会映射到不同的按键。

示例：自定义键盘快捷键

HTML

<textarea id="custom-shortcut">
  <p>要为此文本添加黄色高亮显示：</p>
  <ul>
    <li>选中部分文本
      <ul>
        <li>在 PC 上，按下：Ctrl+Alt+Y</li>
        <li>在 macOS 上，按下：Command+Option+Y</li>
      </ul>
    </li>
  </ul>
</textarea>

JS

tinymce.init({
  selector: 'textarea#custom-shortcut',
  height: 300,
  setup: (editor) => {
    editor.addShortcut('meta+alt+y', 'Add yellow highlight to selected text.', () => {
      editor.execCommand('hilitecolor', false , '#FFFF00');
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

示例：为菜单项添加自定义快捷键

为自定义菜单项添加快捷键时，需同时添加自定义快捷键和自定义菜单项。要在自定义菜单项上显示快捷键，请在创建菜单项时添加 shortcut 配置选项。

HTML

<textarea id="custom-shortcut-2">
  <p>要插入 "@username"：</p>
  <ul>
    <li>点击工具栏的 <em>加号</em> 按钮，然后选择 <strong>Insert username</strong>。</li>
    <li>在 macOS 上，使用键盘快捷键：Command+Option+U。</li>
    <li>在 Windows 或 Linux 上，使用键盘快捷键：Ctrl+Alt+U。</li>
  </ul>
</textarea>

JS

tinymce.init({
  selector: '#custom-shortcut-2',
  height: 300,
  plugins: 'autolink lists link',
  toolbar: 'undo redo | bold italic link bullist | insertUsername',
  setup: (editor) => {
    const insertUsername = () => {
      editor.insertContent(`@username`);
    };

    editor.addShortcut('meta+alt+U', 'Insert username', () => {
      insertUsername();
    });

    editor.ui.registry.addMenuButton('insertUsername', {
      icon: 'plus',
      fetch: (callback) => {
        const items = [
          {
            type: 'menuitem',
            text: 'Insert username',
            shortcut: 'meta+alt+U',
            onAction: () => insertUsername()
          }
        ];
        callback(items);
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

示例：为工具栏按钮添加自定义快捷键

要在自定义工具栏按钮的提示信息中包含键盘快捷键信息，请在创建工具栏按钮时添加 shortcut 配置选项。

HTML

<textarea id="custom-shortcut-3">
  <p>将鼠标悬停在工具栏的 <em>加号</em> 按钮上，可在其提示信息中看到快捷键。</p>
  <p>要插入 "@username"：</p>
  <ul>
    <li>点击工具栏的 <em>加号</em> 按钮。</li>
    <li>在 macOS 上，使用键盘快捷键：Command+Option+U。</li>
    <li>在 Windows 或 Linux 上，使用键盘快捷键：Ctrl+Alt+U。</li>
  </ul>
</textarea>

JS

tinymce.init({
  selector: '#custom-shortcut-3',
  height: 300,
  plugins: 'autolink lists link',
  toolbar: 'undo redo | bold italic link bullist | insertUsername',
  setup: (editor) => {
    const insertUsername = () => {
      editor.insertContent(`@username`);
    };

    editor.addShortcut('meta+alt+U', 'Insert username', () => {
      insertUsername();
    });

    editor.ui.registry.addButton('insertUsername', {
      icon: 'plus',
      tooltip: 'Insert Username',
      shortcut: 'meta+alt+U',
      onAction: insertUsername,
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});