Автоматические ссылки на изображения в tinyMCE

Была задача сделать так, чтоб при вставке фотки в редакторе 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>");
	});
}
This entry was posted in Памятка and tagged , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*