title: Dynamically add context menu items in CKEditor based on user-selected list
body: <p>Using the CKEditor plugin, I am trying to add context menu items based on items the user has selected from a DataTable object.  The menu items show up just fine.  The first menu item added, <strong>Current Time/Date</strong>, works.  But when clicking on any of the items that were added by the For loop, they all execute the last command.  Also the menu items added by the loop were supposed to be in their own group which I thought would automatically put in a line between them and the <strong>Current Time/Date</strong> command.</p>
  <p><strong>cmd</strong> is the name of the command to be added.
  <strong>menuList</strong> is the array of context menu items.
  <strong>menuDetails</strong> is an array of the command details (label, command, group, order)</p>
  <p>Here is the JavaScript for adding the items:</p>
  <pre><code>function InitRTFContext(editor) {           
          if ( editor.contextMenu ) {
              var cmd;
              var menuList = new Object();
              var menuCommand = new Object();
              var menuDetails = new Object();
              var i = 2;
              cmd = &quot;cmdTimeAndDate&quot;;
              editor.addMenuGroup( 'CommonGroup' );               
              editor.addCommand(cmd, { exec : function( editor ) { editor.insertText('[[Now]]'); }});
              menuDetails[&quot;label&quot;] ='Current Time/Date';
              menuDetails[&quot;command&quot;] = cmd;
              menuDetails[&quot;group&quot;] = 'CommonGroup';
              menuDetails[&quot;order&quot;] = 1;
              menuCommand[cmd] = menuDetails;     
              menuList[cmd] = CKEDITOR.TRISTATE_OFF;
  
  
              editor.addMenuGroup('DynamicFields');
              dtChosen.rows().data().each(function (row) {
                  if (row.QuestionTypeID != 0 &amp;&amp; row.QuestionTypeID != 4 &amp;&amp; row.Text != 'Text Block') {
                      i++;                        
                      
                      cmd = &quot;Q_&quot; + row.WebFormTemplateQuestionID + &quot;_&quot; + row.Text;
                      cmd = cmd.replace(/\s/g, '');
                      
                      /* This section is not working */
                      editor.addCommand(cmd, { exec : function( editor ) { editor.insertText('[[' + cmd + ']]'); }});                     
                      /* This section is not working */
  
                      menuDetails = new Object();
                      menuDetails[&quot;label&quot;] = row.Text;
                      menuDetails[&quot;command&quot;] = cmd;
                      menuDetails[&quot;group&quot;] = 'DynamicFields'; 
                      menuDetails[&quot;order&quot;] = i;
                      menuCommand[cmd] = menuDetails;
                      menuList[cmd] = CKEDITOR.TRISTATE_OFF;                      
                  }                   
              });
              
              editor.addMenuItems(menuCommand);
              editor.contextMenu.addListener( function( element, selection ) {
                  return menuList;
              });
          }
          else {
              alert('Error loading RTF Context Menu.');
          }
      }
  </code></pre>
  <p>This creates:
  (not enough rep to post image, so typing it out)</p>
  <blockquote>
  <p>Paste</p>
  <hr />
  <p>Current Time/Date</p>
  <p>Customer Name</p>
  <p>Customer Phone</p>
  <p>Customer Email</p>
  <p>...</p>
  </blockquote>
  <p>All commands after <strong>Current Time/Date</strong> when clicked would print the command used for <strong>Customer Email</strong>.  So, what am I missing?</p>