Wie Kontextmenü jHtmlArea

Question

ich ein jquerycontextMenu zum jHtmlArea hinzufügen muß, um hinzuzufügen, damit es Schlüsselwörter in die jHtmlArea hinzufügen, aber ich habe Schwierigkeiten, den iframe Tag an die contextMenu Trigger vorbei.

Hier ist der Code

$(function() { 

    $.contextMenu({ 
     selector: 'iframe body', 
     className: 'data-title', 
     callback: function (key, options) { 
      //inserts the keyword selected 
      insertAtCaret($(this).attr('id'), '{' + key + '}'); 
     }, 
     items: { 
      "TestPath": { name: "Test path", icon: "" }, 
      ... 
     } 
    }); 

    //adding an extra button to the jHtmlArea 
    jHtmlArea.defaultOptions.toolbar.push([ 
     { 
      // This is how to add a completely custom Toolbar Button 
      css: "keywords", 
      text: "Insert keywords", 
      action: function (btn) { 
       this.contextMenu(); //Error:this.contextMenu is not a function 
      } 
     } 
    ]); 

    //just for context... 
    function insertAtCaret(areaId, text) { 
     ... 
    } 

    //setting up `jHtmlArea` for input #editor 

    $('#editor').htmlarea(); 

}); 

ich viele Möglichkeiten versuchen, den 'iframe Körpers Element ohne Erfolg, wenn Sie auf die benutzerdefinierte Symbolleiste auf die Schaltfläche zu erhalten. Auch ich versuche, die contextMenu Schöpfung in das jHtml Load-Ereignis zu verschieben, hüpfte das Problem war, dass die iframe lädt nach dem Dokument bereit.

Andere Vorgehensweise, die funktionieren könnte, war, einfach den Selektor 'iframe' für das Kontextmenü anzugeben, und dann sollte das Menü aufspringen, wenn der Benutzer mit der rechten Maustaste in den Rahmen klickt.

Ich brauche einige Richtlinien oder einen anderen Ansatz.

Answer 1

Ich schaffe es, die contextMenu über die Schaltfläche in der Symbolleiste zu pop. Ich bin mir ziemlich sicher, dass es eine Möglichkeit gibt, aus dem iframe herauszuspringen, aber ich kann es nicht finden. Hier meine Lösung:

jHtmlArea.defaultOptions.toolbar.push([ 
{ 
    // This is how to add a completely custom Toolbar Button 
    css: "keywords", 
    text: "Insert keywords", 
    action: function (btn) { 

     var jhtml = this; 
     $(function() { 

      $.contextMenu({ 
       selector: '.keywords', 
       className: 'data-title', 
       callback: function (key, options) { 
        jhtml.pasteHTML("{" +key+ "}"); 
       }, 
       items: { 
        "WorkerUnit": { name: "Worker Unit", icon: "" }, 
        ... 
       } 
      }); 

      $('.keywords').contextMenu(); //call it 
     }); 
    } 
} 
]);