Verwenden von AJAX zum Auffüllen der Bildliste in der statischen JS-Datei

Question

Ich habe begonnen, TinyMCE zu verwenden, mit dem Benutzer benutzerdefinierte Plugins erstellen können.

Ich arbeite an einem benutzerdefinierten Plugin, um das sofort einsatzbereite Emoticons-Plugin zu ersetzen.

Der Code, der ein Plugin antreibt, ist in der Datei "plugin.min.js" im entsprechenden Plugin-Verzeichnis definiert - z.

/assets/includes/tinymce/plugins/emoticons1_faces/ 

Dies ist eine Beispieldatei:

tinymce.PluginManager.add("emoticons9", function(a, b) { 
    function c() { 
     var a; 
     return a = '<table role="list" class="mce-grid">', tinymce.each(d, function(c) { 
      a += "<tr>", tinymce.each(c, function(c) { 
       var d = b + "/img/" + c + ".svg"; 
       a += '<td><a href="#" data-mce-url="' + d + '" data-mce-alt="' + c + '" tabindex="-1" role="option" aria-label="' + c + '"><img src="' + d + '" style="width: 18px; height: 18px" role="presentation" /></a></td>' 
      }), a += "</tr>" 
     }), a += "</table>" 
    } 
    var d = [ 
     ["09_001","09_002","09_003"] 
    ]; 
    a.addButton("emoticons9", { 
     type: "panelbutton", 
     panel: { 
      role: "application", 
      autohide: !0, 
      html: c, 
      onclick: function(b) { 
       var c = a.dom.getParent(b.target, "a"); 
       c && (a.insertContent('<img src="' + c.getAttribute("data-mce-url") + '" width="18" height="18" alt="' + c.getAttribute("data-mce-alt") + '" />'), this.hide()) 
      } 
     }, 
     tooltip: "Emoticons - Diversity" 
    }) 
}); 

Wenn ich will, um die Bilder zu ändern, die die Plug-in verwendet, ich habe die Dateiverweise in dieser Zeile ändern:

["09_001","09_002","09_003"] 

Ich kann nicht einfach "plugin.min.js" durch eine PHP-Seite ersetzen, die echo verwendet, um den JavaScript-Code auszugeben, damit ich die Liste der zu verwendenden Bilder dynamisch erzeugen kann (zB damit ich "Favoriten" oder "kürzlich" haben könnte) gebrauchte "Option) .

Ich bat um Beratung über das TinyMCE Forum darüber und wurde gesagt:

TinyMCE läuft 100% Client-Seite, so dass Sie nicht PHP erstellen Plugins ... Sie nutzen könnten AJAX-Aufrufe Daten zu packen aus Ihre Anwendung und dann ersetzen Sie den Inhalt des Arrays mit den Daten Ihrer Anwendung.

Ich habe schon AJAX und PHP verwendet, aber ich bin mir nicht sicher, wie ich diesen Rat umsetzen würde.

Zum Beispiel, ich wollte die Liste der Bilder mit Bildnamen aus einer Datenbank füllen, fragte ich mich, ob ich um Rat fragen könnte, wie ich anfangen soll?

Ich habe kein Problem mit der Erstellung der Liste von Bildern mit PHP, ich kann einfach nicht sehen, wie ich die statische "plugin.min.js" -Datei erhalten würde, um gefüllt werden zu können mit der Ausgabe dieses PHP-Skripts.

Answer 1

Das Plugin verfügt derzeit über eine Liste fest einprogrammiert:

var d = [ 
    ["09_001","09_002","09_003"] 
]; 

Sie würden stattdessen einen AJAX-Aufruf verwenden, um ein Array von Werten zu holen - das JavaScript in der Plugin-Datei ist.

Dieser AJAX-Code würde eine PHP-Seite aufrufen, die Sie erstellen, und es würde ein Array der Werte zurückgeben, die Sie verwenden möchten. Es wäre sehr einfach, wenn Ihr PHP ein JSON-Array an den JavaScript-Code zurückgibt.

Sie verwenden dann dieses Array anstelle des hartcodierten Arrays, das derzeit verwendet wird.

UPDATE: Die unminified Version des Plug-in die folgenden Variable verwendet die Liste der gültigen Emoticons zu verwalten (beachten Sie, dass es ein Array von Arrays von Strings ist):

var emoticons = [ 
    ["cool", "cry", "embarassed", "foot-in-mouth"], 
    ["frown", "innocent", "kiss", "laughing"], 
    ["money-mouth", "sealed", "smile", "surprised"], 
    ["tongue-out", "undecided", "wink", "yell"] 
]; 

...Sie müssen nur Ihre AJAX-Aufruf Update haben den Wert dieser Variablen:

tinymce.util.XHR.send({ 
    url: 'yourserverurlhere.php', 
    success: function(returnedData) { 
     //process the returnedData into a JavaScript ARRAY of ARRAYS 
     emoticons = [ 
      ["cool", "cry"] // this is hardcoded but you get the idea 
     ]; 
    } 
}); 

Hinweis: Sie müssen var verwenden, wenn emoticons in den Erfolg Handler Referenzierung sonst Sie machen eine neue lokale Variable, die die emoticons Variable Plugins versteckt .

Da dies ein asynchroner Anruf ist, sind die Emoticons "Standard" verfügbar, bis der Anruf Ihre neuen Werte zurückgibt.