ckeditor Ereignishandler hinzufügen, um dialog-element

Wählen Sie die Elemente in den Dialogen automatisch ausgelöst, ein change-Ereignis, wenn Sie geändert werden. Sie können hinzufügen einer onChange-Funktion in der definition für das select-element. Hier ein Beispiel aus der api:

onChange : function( api ) {
  //this = CKEDITOR.ui.dialog.select
  alert( 'Current value: ' + this.getValue() );
}

Diese Seiten sind Beispiele für das erstellen von Definitionen verwendet, die durch Dialoge und ui-Elemente:

- Klasse CKEDITOR.dialog

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html

- Klasse CKEDITOR.dialog.definition

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html

- Klasse CKEDITOR.dialog.definition.wählen Sie

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.select.html

Wenn Sie möchten, zu hören, für einen Wechsel zu einem select-element von einem anderen Standort aus, erstellen Sie den listener, dass der Schlüssel auf den "dialogShow" Ereignis. Hier ist ein Beispiel:

//Watch for the "dialogShow" event to be fired in the editor, 
//when it's fired, perform this function
editor.on( 'dialogShow', function( dialogShowEvent )
{
  //Get any data that was sent when the "fire" method fired the dialogShow event
  var dialogShowEventData = dialogShowEvent.data;

  //Get the dialog name from the array of data 
  //that was sent when the event was fired
  var currentDialogName = dialogShowEventData._.name;
  alert( currentDialogName );

  //Create a reference to a particular element (ELEMENT-ID)
  //located on a particular tab (TAB-ID) of the dialog that was shown.
  var selectorObj = dialogShowEventData._.contents.TAB-ID.ELEMENT-ID;

  //Watch for the "change" event to be fired for the element you 
  //created a reference to (a select element in this case).
  selectorObj.on( 'change', function( changeEvent )
  {
    alert("selectorObj Changed");
  });
});

Können Sie überprüfen, ob das Dialogfeld, das Sie wollen, mit zu arbeiten ist das eine, feuerte die "dialogShow" Ereignis. Wenn ja, können Sie ein Objekt erstellen, für das select-element, das Sie interessiert und hören Sie für ein "change" - Ereignis aus.

Hinweis: die TAB-ID und ELEMENT-ID Platzhalter, die ich verwendet, beziehen sich also nicht auf das Id-Attribut des Elements. Die Id bezieht sich auf die Id zugewiesen, in der die dialog-definitions-Datei. Das Id-Attribut für die verschiedenen Elemente sind unterschiedlich jedes mal, wenn der dialog geladen wird.

Dieser Seite einige Infos über Veranstaltungen:

- Klasse CKEDITOR.Veranstaltung

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html

Gut,
Joe

Antworten auf weitere Fragen in den Kommentaren:

Q1) Ihre Veranstaltung hier ist 'dialogShow', welche anderen Ereignisse sind erlaubt? ich.e sind Sie vordefinierte oder Benutzer-definiert?

A1) 'dialogShow' Ereignis vorgegeben ist. Anschauen kann man sich die Datei mit den Dialogen-code in Ihre CKEditor installieren, Verzeichnis oder auf der website:

ckeditor\_source\plugins\dialog\plugin.js

http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html

Wenn Sie suchen Sie die Datei "Feuer", Sie werden sehen, alle Ereignisse, die ausgelöst werden, für Dialoge. Am Ende der Datei hat Definitionen für die verschiedenen Veranstaltungen.

Können Sie auch eigene Veranstaltungen zu wichtigen, indem Sie die "fire" - Methode in Ihrer dialog-code:

this.fire( 'yourEventNameHere', { yourPropertyOne : "propertyOneValue", yourPropertyTwo : "propertyTwoValue" } );

Dann sehen:

editor.on( 'yourEventNameHere', function( eventProperties )
{
  var propOne = eventProperties.data.yourPropertyOne; //propOne = "propertyOneValue"
  var propTwo = eventProperties.data.yourPropertyTwo; //propTwo = "propertyTwoValue"
  Do something here...
});

Q2) Können Sie erklären, die syntax dialogShowEventData._.name ? Ich habe es gesehen, bevor, aber ich weiß nicht die Bedeutung, etwas zu tun private Variablen?

A2) Für jedermann wunderte sich über die "._." syntax verwendet, in der CKEditor-code, der es verwendet, um die Größe des Codes und ersetzt ".privat". Siehe diesen Beitrag von @AlfonsoML in der CKEditor-forum:

http://cksource.com/forums/viewtopic.php?t=22982

Q3) Wo bekomme ich mehr info in der TAB-ID.ELEMENT-ID?

A3) Die Tab-ID ist die id, die Sie zuweisen, um eine bestimmte Registerkarte (Fenster) von einem dialog. ( siehe unten: id : 'tab1', )

Die Element-ID ist die id, die Sie zuweisen, um ein bestimmtes element enthalten, in einer Registerkarte im Dialogfeld. ( siehe unten: id : 'textareaId', )

Auf dieser Seite sehen: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add

Es zeigt, wie definieren Sie die Registerkarten und die enthaltenen Elemente in einem dialog-Fenster ( ich fügte hinzu, ein Beispiel für ein select-element, das ausgelöst wird, eine Benutzer-definierte Ereignis ):

var dialogDefinition =

contents : [
        {
          id : 'tab1',
          label : 'Label',
          title : 'Title',
          expand : true,
          padding : 0,
          elements :
          [
            {
              type : 'html',
              html : '<p>This is some sample HTML content.</p>'
            },
            {
              type : 'textarea',
              id : 'textareaId',
              rows : 4,
              cols : 40
            },
            //Here's an example of a select element:
            {
              type : 'select',
              id : 'sport',
              label : 'Select your favourite sport',
              items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
              'default' : 'Football',
              onChange : function( api ) {
                //this = CKEDITOR.ui.dialog.select
                alert( 'Current value: ' + this.getValue() );

                //CKEditor automatically fires a "change" event here, but
                //here's an example of firing your own event
                this.fire( 'sportSelector', { sportSelectorPropertyOne : "propertyOneInfo" } );
              }
          ]
        }
      ],

Q4) Können Sie kurz erklären, was der obige code macht?

A4) Sehen Sie den ursprünglichen code habe ich Kommentare Hinzugefügt.

InformationsquelleAutor codewaggle