JavaScriptを使ってCKエディタでダイナミックメニューを作成するには？

Question

javascriptを使用してCKエディタでダイナミックメニューを作成する方法は？

詳しくは、現在の作業コードのスクリーンショットをご覧ください。配列は2つのワードを持っている場合、私は動的なコンテキストメニュー

たい

はコンテキストメニューでのみ単語を作成して表示するために必要があることを意味し、コンテキストメニューの長さを短くする必要がある、

配列は、4つのワードを持っている場合menasは4つの単語のコンテキストメニューを作成する必要があります

結果は配列として宣言されています。

  var ckedit ; 
      editor.on('instanceReady', function (e) { 
      var e = e.editor; 
      ckedit = e; 
      e.addMenuGroup("cv_people", 100); 
      e.addMenuItems({ 
      // Addmenu context menu 
        cv: { 
         label: "Suggestions", 
         group: "cv", 
         getItems: function() { 
         ckedit.addCommand("cv1", { 
         exec: function (ckedit) { 
         ckedit.insertText(result[0]); 
         } 
        }); 
         ckedit.addCommand("cv2", { 
         exec: function (ckedit) { 
         ckedit.insertText(result[1]); 
         } 
        }); 
        ckedit.addCommand("cv3", { 
         exec: function (ckedit) { 
         ckedit.insertText(result[2]); 
         } 
        }); 
        ckedit.addCommand("cv4", { 
         exec: function (ckedit) { 
         ckedit.insertText(result[3]); 
         } 
        }); 

        return { 
          cv1: CKEDITOR.TRISTATE_ON, 
          cv2: CKEDITOR.TRISTATE_OFF, 
          cv3: CKEDITOR.TRISTATE_OFF, 
          cv4: CKEDITOR.TRISTATE_OFF, 
          }; 
         } 
        } 
       }); 
      } 
       cv1: { 
         label: " ", 
         group: "cv_people", 
         getItems: function() { 
          //alert("ok"); 
         } 
        }, 
        cv2: { 
         label: " ", 
         group: "cv_people", 
         getItems: function() { 
          //alert("ok"); 
         } 
        }, 
        cv3: { 
         label: " ", 
         group: "cv_people", 
         getItems: function() { 
          //alert("ok"); 
         } 
        }, 
        cv4: { 
         label: " ", 
         group: "cv_people", 
         getItems: function() { 
          //alert("ok"); 
         } 
        }, 

動的にコンテキストメニューを取得してください。

現在の作業コードのスクリーンショットをご覧ください。

Answer 1

Minimal, Complete, and Verifiable exampleを提供していないので、私は多くの推測をする必要があります。また、あなたの現在のコードは非常に奇妙です。たとえば、すべて同じCKEditorインスタンス（editor、ckedit、およびリスナー内で "再定義された" e）にリンクする変数が非常に多く必要なのはなぜですか？私はあなたのようなものを使用して取得すると仮定しただけckeditを使用します：

var ckedit = CKEDITOR.replace('ckeditor', some config); 

私もあなたが時々AJAX結果で更新され、いくつかのグローバル変数resultsを持っていることを前提としています。代わりに固定のものを使用します。

var results = ["A", "BB", "CCC", "DDDD"]; 

それで、あなたが必要なもののアイデアはあなたが事前にメニューグループとトップレベルの「提案」メニュー項目を作成することであるここでは、この

ckedit.on('instanceReady', function (ee) { 
    ckedit.addMenuGroup("cv_people", 100); 
    ckedit.addMenuGroup("cv_sub", 100); 
    ckedit.addMenuItems({ 
     cv: { 
      label: "Suggestions", 
      group: "cv_people", 
      getItems: function() { 
       var menuItems = {}; 
       var states = {}; 
       for (var i = 0; i < results.length; i++) { 
        // create scope for "local" i that we use in onClick closure 
        (function (i) { 
         var key = "cv_" + i; 
         menuItems[key] = { 
          label: results[i], 
          group: "cv_sub", 
          onClick: function() { 
           ckedit.insertText(results[i]); 
           //alert(results[i]); 
          } 
         }; 
         states[key] = CKEDITOR.TRISTATE_OFF; 
        })(i); 
       } 

       ckedit.addMenuItems(menuItems); 

       return states; 
      } 
     } 
    }); 

    ckedit.contextMenu.addListener(function (element, selection) { 
     return { 
      cv: CKEDITOR.TRISTATE_OFF 
     }; 
    }); 
}); 

のようなものです。対応するコンテナオブジェクトに自動生成キーvar key = "cv_" + i;の値を入力するだけで、getItemsが呼び出されたときに子menuItemsとそのstatesをオンデマンドで作成（または再作成）します。