How to add additional menu item in right click in CkEditor?

Question

In CKeditor, when we right click on image, there are four menu items that appear.

cut
copy
paste
image properties

I would like to add two more menu items,

test1
test2 -> subtest2
         subtest3 

test1 will be one menu and test2 will have two sub menus.

Also, how can I add action to this new menu item? For example, click on test1 should draw a border on right side. clicking on subtest2 will add image shadow and so on.

In addition to this. I would like to do similar when we right-click on div and table.

I have found context menu plugins but I need to know how can I use this.

Answer 1

I met this problem, too. Thanks to the bad documentation of CKEditor, I finally make it by trying different ways the whole afternoon. This code works well on my site -- 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
    };
  });
}

and this will show like

Insert Tick -> Insert a tick

-------------- Insert a Question Mark

-------------- Insert a tick and question mark