CkEditor，如何添加額外的菜單項右擊？

Question

在CKeditor中，當我們右鍵單擊圖像時，會出現四個菜單項。

cut 
copy 
paste 
image properties 

我想補充兩個菜單項，

test1 
test2 -> subtest2 
     subtest3 

test1的將是一個菜單，並測試2將有兩個子菜單。

也請指導我如何添加行動到這個新的菜單項。例如，單擊test1應在右側繪製邊框。點擊subtest2會添加圖片陰影等。

除此之外。當我們在div和table上右擊時，我想要做類似的事情。

請幫幫我。這是緊急的。我找到了上下文菜單插件，但我需要知道如何使用它？

感謝您的幫助

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

，這將顯示出類似

插入蜱 - >將勾

------- -------插入一個問號

--------------空格加和問號

Answer 2

請參考此鏈接http://blog.ale-re.net/2010/06/ckeditor-context-menu.html這給你想

Answer 3

我也嘗試same.Finally我有一個解決方案。所以我在這裏分享它，它可以幫助別人。

 <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>