В CKeditor, когда мы щелкаем правой кнопкой мыши по изображению, появляется четыре пункта меню.
cut copy paste image properties Я хотел бы добавить еще два пункта меню,
test1 test2 -> subtest2 subtest3
test1 будет одним из меню, а test2 будет иметь два подменю.
также, пожалуйста, назовите меня, как я могу добавить действие в этот новый пункт меню. Например, нажмите на test1, чтобы нарисовать границу с правой стороны. нажатие на subtest2 добавит тень изображения и так далее.
в добавок к этому. Я хотел бы сделать подобное, когда мы будем править клик на div и table.
Пожалуйста, помогите мне. Это срочно. Я нашел плагины контекстного меню, но мне нужно знать, как я могу это использовать?
Спасибо за вашу помощь
Я тоже встретил эту проблему. Благодаря плохой документации 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 }; }); }
и это будет выглядеть как
Вставить отметку -> Вставить галочку
————– Вставьте знак вопроса
————– Вставьте знак галочки и вопроса
Пожалуйста, обратитесь к этой ссылке http://blog.ale-re.net/2010/06/ckeditor-context-menu.html, в которой содержится подробная информация о том, что вы хотите
Я также пытаюсь сделать то же самое. Наконец у меня есть одно решение. Здесь я делюсь этим. Он может помочь другим.
<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>