Adding Lightbox for Image Plugin in Tinymce

本博客的框架是django+grappeli+filebrowser，后台的在线编辑器是使用的tinymce，图片等资源的管理采用了django-filebrowser，这样就可以使用tinymce的nsert image插件插入图片，由于插入的仅仅是图片可能是处理过的，现在需要对博客中的所有图片添加ightbox功能，使可以查看原图。

django-filebrowser为django提供了文件管理的功能，并且对tinymce提供了接口，使得在tinymce的insert image界面中可以选择“Browser”，从而打开filebrowser的管理界面，使得可以选择要插入的图片。tinymce是一款在线编辑器，它提供了强大的插件功能，并且有完备的文档。lightbox是一款jquery的UI插件，使用户可以点击图片，查看图片的详细信息，如更大尺寸的图片，并且可以通过“prev”和"next"，来查看页面中所有“lightbox”图片。

tinymce的insert image插件功能代码主要在文件：tiny_mce/themes/advanced/js/image.js中，界面文件是tiny_mce/themes/advanced/image.htm，我们要做到工作就是在tinymce将图片插入到html中时进行拦截，并修改img节点为<a><img .../></a>节点，因为这是lightbox的格式要求：

[xml]
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>由于在使用filebrowser管理资源文件时，在上传的图片都会被保存多个版本：thumbnail, small, medium, big, large和原始文件，并且文件的命名也是以_thumbnail.xxx, _samll.xxx等的形式，如原始图片名为myimage-2012000.png,那么通过filebrowser上传的图片将保存myimage-2012000_thumbnail.png，myimage-2012000_small.png等处理后的文件，并且保存原文件。

在filebrowser的管理界面，提供了选择这些文件的接口，如下图，可以根据需要选择不同的图片尺寸显示，如选择select，就是选择原文件。

tinymce在插入图片时，是调用了image.js文件的ImageDialog.update方法。该方法的最后几段代码如下：

[js]
....
el = ed.selection.getNode();

if (el && el.nodeName == 'IMG') {
    ed.dom.setAttribs(el, args);
    tinyMCEPopup.editor.execCommand('mceRepaint');
    tinyMCEPopup.editor.focus();
} else {
    ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
    ed.dom.setAttribs('__mce_tmp', args);
    ed.dom.setAttrib('__mce_tmp', 'id', '');

    ed.undoManager.add();
}

tinyMCEPopup.close();

....
el = ed.selection.getNode();

if (el && el.nodeName == 'IMG') {
ed.dom.setAttribs(el, args);
tinyMCEPopup.editor.execCommand('mceRepaint');
tinyMCEPopup.editor.focus();
} else {
ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');

ed.undoManager.add();
}

tinyMCEPopup.close(); 我们将这段代码修改成：

[js]
....
el = ed.selection.getNode();

if (el && el.nodeName == 'IMG') {
    ed.dom.setAttribs(el, args);
    tinyMCEPopup.editor.execCommand('mceRepaint');
    tinyMCEPopup.editor.focus();
} else {
    if(f.lightbox.checked){
        ed.execCommand('mceInsertContent', false, '<a id="__mce_a_tmp" class="lightbox" rel="lightbox[plants]"><img id="__mce_tmp" /></a>', {skip_undo : 1});
        ed.dom.setAttribs('__mce_tmp', args);
        ed.dom.setAttrib('__mce_tmp', 'id', '');
        var href = args.src.replace('_thumbnail.', '.').replace('_small.', '.').replace('_medium.', '.').replace('_big.', '.').replace('_large.', '.');

        ed.dom.setAttribs('__mce_a_tmp', {'href':href});
        ed.dom.setAttrib('__mce_a_tmp', 'id', '');
    }else{
        ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
        ed.dom.setAttribs('__mce_tmp', args);
        ed.dom.setAttrib('__mce_tmp', 'id', '');
    }

    ed.undoManager.add();
}

tinyMCEPopup.close();

....
el = ed.selection.getNode();

if (el && el.nodeName == 'IMG') {
ed.dom.setAttribs(el, args);
tinyMCEPopup.editor.execCommand('mceRepaint');
tinyMCEPopup.editor.focus();
} else {
if(f.lightbox.checked){
  ed.execCommand('mceInsertContent', false, '<a id="__mce_a_tmp" class="lightbox" rel="lightbox[plants]"><img id="__mce_tmp" /></a>', {skip_undo : 1});
  ed.dom.setAttribs('__mce_tmp', args);
  ed.dom.setAttrib('__mce_tmp', 'id', '');
  var href = args.src.replace('_thumbnail.', '.').replace('_small.', '.').replace('_medium.', '.').replace('_big.', '.').replace('_large.', '.');

  ed.dom.setAttribs('__mce_a_tmp', {'href':href});
  ed.dom.setAttrib('__mce_a_tmp', 'id', '');
}else{
  ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
  ed.dom.setAttribs('__mce_tmp', args);
  ed.dom.setAttrib('__mce_tmp', 'id', '');
}

ed.undoManager.add();
}

tinyMCEPopup.close();这里的f.lightbox.checked是image.htm文件中添加了一个checkbox，如下图：

这样就可以使得插入的图片的html代码从<img ..../>变成lightbox要求的<a href="" rel="lightbox[plants]"><img .../></a>了。另外在图片显示的页面，如本博客的post detial页面，还需要添加lightbox的js和css，可以从http://lokeshdhakar.com/projects/lightbox2/下载，当前最新版

补充：web前端 , JavaScript ,