如何在CkEditor中的右键单击中添加其他菜单项？ [英] How to add additional menu item in right click in CkEditor?

问题描述

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

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将是一个菜单，而test2将具有两个子菜单。

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

此外，如何向该新菜单项添加操作？例如，单击test1应该在右侧绘制边框。单击subtest2将添加图像阴影，依此类推。

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.

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

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.

推荐答案

我也遇到了这个问题。多亏了CKEditor的不良文档，我终于通过整个下午尝试不同的方式来做到这一点。
此代码在我的网站上效果很好-Drupal 6& CKEditor 4。

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
    };
  });
}

，这将显示为

插入刻度线->插入刻度线

Insert Tick -> Insert a tick

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

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

--------------插入刻度和问号

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

这篇关于如何在CkEditor中的右键单击中添加其他菜单项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！