Использование 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-кода sot, который я могу динамически генерировать список используемых изображений (например, поэтому я мог бы иметь «избранное» или «недавно используется ") ,

я обратился за советом на TinyMCE форуме об этом, и было сказано:

TinyMCE работает 100% на стороне клиента, так что вы не можете создать PHP плагин ... Вы могли бы использовать AJAX вызовы, чтобы захватить данные ваше приложение, а затем замените содержимое этого массива данными вашего приложения.

Раньше я использовал AJAX и PHP, но я не уверен, как я буду реализовывать этот совет.

Например, я хотел заполнить список изображений, используя имена изображений из базы данных, я задавался вопросом, могу ли я попросить совета о том, как начать?

У меня нет проблем с процессом генерации списка изображений с использованием PHP, я просто не вижу, как бы получить статический файл «plugin.min.js», чтобы быть заполненным с выходом этого скрипта PHP.

Answer 1

плагин в настоящее время есть список жёстко:

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

Вы бы вместо того, чтобы использовать вызов AJAX для извлечения массива значений - это JavaScript в файле плагина.

Этот код AJAX вызывает страницу PHP, которую вы создаете, и она вернет массив значений, которые вы хотите использовать. Было бы очень просто, чтобы ваш PHP возвращал массив JSON в код JavaScript.

Затем вы используете этот массив вместо жестко закодированного массива, который в настоящее время используется.

UPDATE: unminified версия плагина использует следующую переменную для управления списком допустимых смайликов (обратите внимание, что это массив массивов строк):

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 в обработчике успеха в противном случае вы делаете новую локальные переменные, скрывающую emoticons переменными плагин игровой ,

Поскольку это асинхронный вызов, смайлики по умолчанию будут доступны до тех пор, пока вызов не вернет ваши новые значения.