Была задача сделать так, чтоб при вставке фотки в редакторе tinyMCE, у него автоматом подставлялась ссылка на полное изображение, для дальнейшего показа в лайтбоксе.
Для лайтбокса ссылке задаю класс lightbox, изображение в моем проекте отличаются ссылками — medium среднего размера и original — оригинальное фото.
Ну и собственно сам код, который прописывается внутри init() у tinyMCE:
init_instance_callback: function (editor) {
editor.on('BeforeSetContent', function (e) {
const html = e.content;
const regex = /<img src="(.*?)".*?>/g;
let m;
while ((m = regex.exec(html)) !== null) {
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
e.content = '<a href="'+ m[1].replace('medium', 'original') +'" class="ligthbox">'+ m[0] +'</a>';
}
});
}
PS: если нужно просто вставить ссылку, без замены в ссылке medium на original — можно использовать вариант попроще:
init_instance_callback: function (editor) {
editor.on('BeforeSetContent', function (e) {
e.content = e.content.replace(/<img src="(.*?)"(.*?)>/g, "<a href=\"$1\" class=\"ligthbox\"><img src=\"$1\"$2></a>");
});
}
В каком файле это надо вставлять?
Это для ВОрдпресс?
Нет, это в целом для tinyMCE