Была задача сделать так, чтоб при вставке фотки в редакторе 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