JavaScript — использование AJAX для заполнения списка изображений в статическом файле JS
Я начал использовать 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-кода, чтобы я мог динамически генерировать список изображений для использования (например, чтобы у меня могли быть «избранное» или «недавно»). б) вариант).
Я попросил совета на форуме TinyMCE по этому поводу, и мне сказали:
TinyMCE работает на 100% на стороне клиента, поэтому вы не можете создавать плагины PHP … вы
может использовать вызовы AJAX, чтобы получить данные из вашего приложения, а затем
замените содержимое этого массива данными вашего приложения.
Я использовал AJAX и PHP раньше, но я не уверен, как бы я реализовал этот совет.
Например, скажем, я хотел заполнить список изображений, используя имена изображений из базы данных, я подумал, могу ли я попросить совета о том, как начать?
У меня нет проблем с процессом генерации списка изображений с использованием PHP, я просто не вижу, как получить статический файл «plugin.min.js», чтобы можно было заполнить выводом этот сценарий PHP.
Решение
В настоящее время плагин имеет жестко закодированный список:
var d = [
["09_001","09_002","09_003"]
];
Вместо этого вы должны использовать AJAX-вызов для извлечения массива значений — это JavaScript в файле плагина.
Этот код AJAX будет вызывать созданную вами страницу PHP и возвращать массив значений, которые вы хотите использовать. Было бы очень легко заставить ваш PHP возвращать массив 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
];
}
});
обратите внимание, что вы не используете var при ссылке emoticons в обработчике успеха в противном случае вы создаете новую локальную переменную, которая скрывает плагины emoticons переменная.
Поскольку это асинхронный вызов, смайлики по умолчанию будут доступны до тех пор, пока вызов не вернет ваши новые значения.
Другие решения
Других решений пока нет …