Idiot Idiot - 4 months ago 12x
PHP Question

Using AJAX to populate image list in static JS file

I have started using TinyMCE, which allows users to create custom plugins.

I am working on a custom plugin to replace the out-of-the-box emoticons plugin.

The code that powers a plugin is defined in the "plugin.min.js" file inside the relevant plugin directory - e.g.


This is a sample file:

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 = [
a.addButton("emoticons9", {
type: "panelbutton",
panel: {
role: "application",
autohide: !0,
html: c,
onclick: function(b) {
var c = a.dom.getParent(, "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"

If I want to change the images that the plugin uses, I have to change the file references in this line:


I can't simply replace "plugin.min.js" with a php page which uses echo to output the javascript code sot that I can dynamically generate the list of images to use (e.g. so I could have a "favourites" or "recently used" option).

I asked for advice on the TinyMCE forum about this, and was told:

TinyMCE runs 100% client side so you cannot create PHP plugins ... you
could use AJAX calls to grab data from your application and then
replace the contents of that array with your application's data.

I've used AJAX and PHP before, but I'm not sure how I'd go about implementing this advice.

For example, say I wanted to populate the list of images using image names from a database, I wondered if I could ask for advice about how to start?

I don't have a problem with the process of generating the list of images using PHP, I just can't see how I'd get the static "plugin.min.js" file to be able to be populated with the output of that PHP script.


The plugin currently has a list hardcoded:

var d = [

You would instead use an AJAX call to fetch an array of values - this is JavaScript in the plugin file.

That AJAX code would call a PHP page you create and it would return an array of the values you want to use. It would be very easy to have your PHP return a JSON array to the JavaScript code.

You then use that array instead of the hard coded array that is currently used.

UPDATE: The unminified version of the plugin uses the following variable to manage the list of valid emoticons (note that it is an array of arrays of strings):

var emoticons = [
    ["cool", "cry", "embarassed", "foot-in-mouth"],
    ["frown", "innocent", "kiss", "laughing"],
    ["money-mouth", "sealed", "smile", "surprised"],
    ["tongue-out", "undecided", "wink", "yell"]
]; you just need to have your AJAX call update the value of that variable:

    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

note you do NOT use var when referencing emoticons in the success handler otherwise you are making a new local variable that hides the plugins's emoticons variable.

As this is a asynchronous call the "default" emoticons will be available until the call returns your new values.