20160530

I've been messing about with TinyMCE which is a text editor you can use on web forms. I've created a plugin which uses image from EmojiOne which allows me to insert SVG emojis into the text. It works okay so far. This is a test - click an icon at the bottom to insert an emoji: https://oracle101.co.uk/test-mce.php The emojis that are loaded under each icon are defined in a 2 dimensional javascript array - e.g. in the "var = d" bit here: https://oracle101.co.uk/assets/includes/tinymce/plugins/emoticons_faces/plugin.min.js I want to use AJAX to get that data from an an external page, which spits the data out in the right format - e.g. view-source:https://oracle101.co.uk/emoji.php?cat=emoticons_travel_places [["05_001","05_002","05_003","05_004","05_005"], ["05_006","05_007","05_008","05_009","05_010"], ["05_011","05_012","05_013","05_014","05_015"], ["05_016","05_017","05_018","05_019","05_020"]] The problem I have hit up against is that when making an ajax call in JS it's not possible to assign the response from the call to a variable, at least, I can't work out how to do it. I've read quite a bit about it on Stack Overflow - e.g. http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call I did get a solution via: function getURL(url){ return $.ajax({ type: "GET", url: url, cache: false, async: false }).responseText; } var data = getURL("emoji.php?cat=emoticons_travel_places"); alert(data); But found out that using async: false is deprecated and should not be used. So I'm trying to work out how to do it the "proper" way, if one exists... I can't rewrite the plugin code to sit inside the XHR.send either because then the plugin isn't recognised when TinyMCE loads - e.g. // Sends a low level Ajax request tinymce.util.XHR.send({ url: 'emoji.php?cat=emoticons_travel_places', var foo = text; tinymce.PluginManager.add("emoticons_travel_places", function(a, { function c() { var a; return a = '<table role="list" class="mce-grid">', tinymce.each(d, function© { a += "<tr>", tinymce.each(c, function© { 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:30px; height:30px" role="presentation" /></a></td>' }), a += "</tr>" }), a += "</table>" } var d = ...get from XHR.send; a.addButton("emoticons_travel_places", { type: "panelbutton", panel: { role: "application", autohide: !0, html: c, onclick: function( { var c = a.dom.getParent(b.target, "a"); c && (a.insertContent('<img src="' + c.getAttribute("data-mce-url") + '" width="30" height="30" title="' + c.getAttribute("data-mce-alt") + '" />'), this.hide()) } }, tooltip: "Emoticons - Travel & Places" }) }); } }); The Stack Overflow thread talks about using "promises" and "callbacks" but I'm just about hitting the limit of my skills here and have tried asking elsewhere so I thought I'd ask here too! Any advice much appreciated. Thanks