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”替换为使用echo输出javascript代码的php页面，我可以动态生成要使用的图像列表（例如我可以拥有“收藏夹”或“最近使用”选项）。

我在TinyMCE论坛上询问了有关此问题的建议，并被告知：

TinyMCE运行100％的客户端，所以你不能创建PHP插件......你可以使用AJAX调用从您的应用程序中获取数据然后用应用程序的数据替换该数组的内容。

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

例如，假设我想使用数据库中的图像名称填充图像列表，我想知道是否可以询问有关如何启动的建议？

我在使用PHP生成图像列表的过程中没有问题，我只是看不出我如何获得静态“plugin.min.js”文件以便能够填充该PHP脚本的输出。

Answer 1

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

DATA_URI

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

该AJAX代码将调用您创建的PHP页面，它将返回您要使用的值的数组。让PHP将JSON数组返回给JavaScript代码非常容易。

然后使用该数组而不是当前使用的硬编码数组。

UPDATE：插件的未分级版本使用以下变量来管理有效表情符号列表（请注意，它是一个字符串数组数组）：

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

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

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

请注意，在成功处理程序中引用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 ]; } });时不要使用var，否则您将创建一个新的局部变量来隐藏插件的emoticons变量。

由于这是一个异步调用，“默认”表情符号将一直有效，直到调用返回新值。

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

1 个答案: