如何在CkEditor的右键菜单中添加额外的菜单项？

Question

在 CKeditor 中，当我们右键单击图片时，会出现四个菜单项。

cut
copy
paste
image properties

我想增加两个菜单项，

test1
test2 -> subtest2
         subtest3 

test1将是一个菜单，test2将有两个子菜单。

另外，我该如何为这个新菜单项添加操作？例如，点击test1应该在右侧绘制边框。点击subtest2会添加图像阴影等等。

此外，当我们右键单击div和table时，我想做类似的事情。

我已经找到了上下文菜单插件，但我需要知道如何使用它。

- user2374740

Answer 1

我也遇到了这个问题。由于 CKEditor 文档不好，我花了整个下午试了很多不同的方法，最终解决了它。 这段代码在我的网站上（Drupal 6 和 CKEditor 4）运作良好。

// Assume I already Have 3 commands
// insertTick, insertTickxxx, and insertTickxxxandxxx

if (editor.addMenuItems) {
  // 1st, add a Menu Group
  // tip: name it the same as your plugin. (I'm not sure about this)
  editor.addMenuGroup('tick', 3);

  // 2nd, use addMenuItems to add items
  editor.addMenuItems({
      // 2.1 add the group again, and give it getItems, return all the child items
      tick :
      {
        label : 'Insert Tick',
        group : 'tick',
        order : 21,
        getItems : function() {
          return {
            tick_insertTick : CKEDITOR.TRISTATE_OFF,
            tick_insertQuestionMark : CKEDITOR.TRISTATE_OFF,
            tick_insertTickandQuestion : CKEDITOR.TRISTATE_OFF
          };
        }
      },

      // 2.2 Now add the child items to the group.
      tick_insertTick :
      {
        label : 'Insert a tick',
        group : 'tick',
        command : 'insertTick',
        order : 22
      },

      tick_insertQuestionMark :
      {
        label : 'Insert Question Mark',
        group : 'tick',
        command : 'insertQuestionMark',
        order : 23
      },

      tick_insertTickandQuestion :
      {
        label : 'insert Tick and Question',
        group : 'tick',
        command : 'insertTickandQuestion',
        order : 24
      }
  });
}

// 3rd, add Listener, and return the Menu Group
if (editor.contextMenu) {
  editor.contextMenu.addListener(function(element, selection) {
    return {
      tick : CKEDITOR.TRISTATE_OFF
    };
  });
}

这将显示为：

插入勾号 -> 插入一个勾号

-------------- 插入问号

-------------- 插入勾号和问号

- lazurey

---

你说得对，CKEditor的文档真是太糟糕了！感谢您为我们做这项工作！这对于我的自定义小部件非常有效。 - Sean Kendle

我发现这段代码需要在我的插件定义中的插件“init”函数中。对于那些想知道的人来说。 - Sean Kendle

我使用了以下代码来移除其他菜单项（插入到 if (editor.addMenuItems) { 之前）：editor.removeMenuItem('cut'); editor.removeMenuItem('copy'); editor.removeMenuItem('paste'); - Sean Kendle

@SeanKendle 这可以用来移除菜单。神奇的是，你最后一个 removeMenuItem 命令在大写字母'I'之后和接下来的't'之前有一个"‌"字符！它是看不见的，但它确实存在。 - Csaba Toth

奇怪。好的，感谢您指出这个问题，这对那些可能会遇到复制/粘贴代码问题的人很有帮助！看起来这是一个零宽度非连接符，在IE中显示为“管道”字符。这可能是StackOverflow插入的，以允许单词换行到下一行，因为这不是默认的HTML行为。 - Sean Kendle

只有在使用editor.addCommand注册“insertQuestionMark”、“insertTickandQuestion”和“insertTick”命令时，答案才能正常工作。 - Grasshopper

Answer 2

1. Register a new ckEditor command;
2. Add a new menu group;
3. Add new menu item;

4. Add click event listener to the context menu.

       // Register a command execute on context menu item click
       editor.addCommand('test1', {
           exec: editor => {
               console.log(editor);
               alert('test1');
           }
       });
   
       // Check for context menu and add new item/s
       if ( editor.contextMenu ) {
           // Add group and item/s
           editor.addMenuGroup( 'testGroup' );
           editor.addMenuItem( 'testItem', {
               label: 'Test 1',
               icon: this.path + 'icons/test.png',
               command: 'test1',
               group: 'testGroup'
           });
   
           // Add event listener
           editor.contextMenu.addListener(element => {
               console.log(element);
               return { testItem: CKEDITOR.TRISTATE_OFF };
           });
       }
   

欲了解更多信息，请查看此链接： https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_2.html

- Santo Boldizar

Answer 3

我也尝试了同样的事情。最终我找到了一个解决方案，现在在这里分享给大家，希望能对其他人有所帮助。

      <script type="text/javascript">
   // Menu code
 var config = {
  toolbar: [],
removePlugins : 'pastetext,clipboard'   
 };

var editor = CKEDITOR.appendTo('ckeditor', config);



editor.on( 'instanceReady', function(e) { 
 var e = e.editor;

  // Commands
e.addCommand("cv_claimant_Birthdate", {
    exec: function(e) {
        e.insertText("\{\!claimant.Birthdate\}");
    }
});
e.addCommand("cv_claimant_Name", {
    exec: function(e) {
        e.insertText("\{\!claimant.Name\}");
    }
});
e.addCommand("cv_claim_Name", {
    exec: function(e) {
        e.insertText("\{\!claim.Name\}");
    }
});
e.addCommand("cv_claim_CreatedDate", {
    exec: function(e) {
        e.insertText("\{\!claim.CreatedDate\}");
    }
});

// Listener
e.contextMenu.addListener(function(element, selection) {
    return {
        cv: CKEDITOR.TRISTATE_ON
    };
});

// Menu Groups; different numbers needed for the group separator to show
e.addMenuGroup("cv", 500);
e.addMenuGroup("cv_people", 100);
e.addMenuGroup("cv_claim", 200);

// Menus (nested)
e.addMenuItems({
    // Top level
    cv: {
        label: "Insert Merge Field",
        group: "cv",
        getItems: function() {
            return {
                cv_claimant: CKEDITOR.TRISTATE_OFF,
                cv_claim: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // One sub-menu
    cv_claimant: {
        label: "Claimant Person (claimant)",
        group: "cv_people",
        getItems: function() {
            return {
                cv_claimant_Birthdate: CKEDITOR.TRISTATE_OFF,
                cv_claimant_Name: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // These run commands
    cv_claimant_Birthdate: {
        label: "Birthdate (Birthdate: date)",
        group: "cv_people",
        command: "cv_claimant_Birthdate"
    },
    cv_claimant_Name: {
        label: "Full Name (Name: string)",
        group: "cv_people",
        command: "cv_claimant_Name"
    },
    // Another sub-menu
    cv_claim: {
        label: "Claim (claim)",
        group: "cv_claim",
        getItems: function() {
            return {
                cv_claim_CreatedDate: CKEDITOR.TRISTATE_OFF,
                cv_claim_Name: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // These run commands
    cv_claim_Name: {
        label: "Claim Number (Name: string)",
        group: "cv_claim",
        command: "cv_claim_Name"
    },
    cv_claim_CreatedDate: {
        label: "Created Date (CreatedDate: datetime)",
        group: "cv_claim",
        command: "cv_claim_CreatedDate"
    },
});
 });   






</script>

- Sriram S