如何在TinyMCE 5右键菜单中添加charmap插件？

嘿，我来帮你搞定这个问题！你现在右键编辑器只显示「Link」选项，是因为没有在TinyMCE的初始化配置里明确指定右键菜单要包含charmap插件。咱们分两步调整：

1. 添加contextmenu配置项 #

在你的tinymce.init配置对象里，新增一个contextmenu属性，把charmap和你需要的其他右键选项加进去。比如：

contextmenu: 'link charmap'

这样右键菜单就会同时显示Link和字符映射表选项了。

2. 完整修改后的初始化代码 #

下面是整合了修改的完整代码，我标了关键修改部分：

tinymce.init({ 
  branding : false, 
  content_css : '/css/tinymce_content.css', 
  language : 'nl', 
  menubar : false, 
  plugins : ['charmap fullscreen hr link lists paste tabfocus'], 
  relative_urls : false, 
  remove_script_host : false, 
  selector : '#' + alineaId, 
  style_formats: [ 
    {title: 'Heading 2', format: 'h2'}, 
    {title: 'Heading 3', format: 'h3'}, 
    {title: 'Heading 4', format: 'h4'}, 
    {title: 'Heading 5', format: 'h5'}, 
    {title: 'Heading 6', format: 'h6'}, 
    {title: 'Normal', block: 'p'} 
  ], 
  toolbar : 'fullscreen | undo redo', 
  fullscreen_new_window : true, 
  fullscreen_settings : { theme_advanced_path_location : 'top' },
  // *新增的右键菜单配置*
  contextmenu: 'link charmap',
  setup: function (editor) { 
    editor.ui.registry.addContextToolbar('textselection', { 
      predicate: function (node) { 
        return !editor.selection.isCollapsed(); 
      }, 
      items: 'bold italic | styleselect | link | bullist numlist', 
      position: 'selection', 
      scope: 'node' 
    }); 
  } 
});

补充说明 #

• 你已经在plugins里引入了charmap，这一步没问题，不用额外调整；
• 如果需要添加更多右键选项，直接在contextmenu的字符串里用空格分隔就行，比如contextmenu: 'link charmap fullscreen'；
• 你现有的文本选择上下文工具栏（就是选中文字后弹出的工具栏）不受这个修改影响，两者可以共存。

内容的提问来源于stack exchange，提问作者poashoas