Делаем все картинки кликабельные в редакторе tinymce

И так задача такая: некие картинки добавляются с помощью редактора tinymce и нужно чтоб при клике на картинку открывалась галерея картинок (в моем случае это shadowbox галерея).

Для того чтобы картинки открывались в галереи shadowbox, нужно сделать обертки над картинками:

<a href="images/max/my.jpg" rel="shadowbox[mygallery];player=img;"><img src="images/thumbnails/my.jpg"/></a>

Реализация: привязываемся к событиям BeforeSetContent и SaveContent. Перед вставкой контента в редактор, удаляем все раннее добавленные обертки над картинками, а перед сохранением добавляем обертки.

setup : function(ed) {
    ed.on('BeforeSetContent', function (e) {
        e.content = e.content.replace(new RegExp('<a[^>]*>\s*(<img[^>]*src="' + st0SiteHttpHost + 
'[^"]*"[^>]*>)\s*<\/a>', 'gi'), "$1");
    });
    ed.on('SaveContent', function (e) {
        e.content = e.content.replace(new RegExp('<img[^>]*src="(' + st0SiteHttpHost + '[^"]*)"[^>]*>',
 'gi'), function (m, m1) {
            return '<a href="' + m1.replace("/thumbnails/", "/max/") + '" 
rel="shadowbox[mygallery];player=img;"><img src="' + m1 + '" /></a>';
        });
    });
}
По теме:
Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) { function SelectControl() { this.init.apply(this, Read more

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. Реализуем свой менеджер для картинок. Покажем кнопку Read more

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить Read more

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

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