使用 AJAX 填充静态 JS 文件中的图像列表

Question

我已经开始使用 TinyMCE，它允许用户创建自定义插件。

我正在开发一个自定义插件来替换开箱即用的表情符号插件。

为插件提供动力的代码在相关插件目录内的“plugin.min.js”文件中定义 - 例如

/assets/includes/tinymce/plugins/emoticons1_faces/

这是一个示例文件：

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"
    })
});

如果我想更改插件使用的图像，我必须更改此行中的文件引用：

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

我不能简单地将 "plugin.min.js" 替换为 php 页面，该页面使用 echo 输出 javascript 代码以便我可以动态生成要使用的图像列表（例如所以我可以有一个 "favourites" 或 "recently used" 选项）。

我在 TinyMCE 论坛上征求了有关这方面的建议，并被告知：

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.

我以前使用过 AJAX 和 PHP，但我不确定我将如何实施这个建议。

例如，假设我想使用数据库中的图像名称填充图像列表，我想知道是否可以就如何开始寻求建议？

我对使用 PHP 生成图像列表的过程没有问题，我只是看不出如何获得静态 "plugin.min.js" 文件将填充该 PHP 脚本的输出。

Answer 1

该插件当前有一个硬编码列表：

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

您可以改为使用 AJAX 调用来获取值数组 - 这是插件文件中的 JavaScript。

AJAX 代码会调用您创建的 PHP 页面，并且会 return 您要使用的值的数组。将 PHP return 一个 JSON 数组添加到 JavaScript 代码将非常容易。

然后您使用该数组代替当前使用的硬编码数组。

更新：插件的未缩小版本使用以下变量来管理有效表情符号列表（注意它是字符串数组的数组）：

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

...所以您只需要让 AJAX 调用更新该变量的值：

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
        ];
    }
});

请注意，在成功处理程序中引用 emoticons 时不要使用 var，否则您将创建一个隐藏插件的 emoticons 变量的新局部变量。

由于这是一个异步调用，因此 "default" 表情符号将可用，直到调用 return 您的新值。

使用 AJAX 填充静态 JS 文件中的图像列表

Using AJAX to populate image list in static JS file

javascript

php

tinymce

tinymce-4