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/下載，當前最新版本為2.51，要求的檔案有：

[xml]
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/jquery-ui-1.8.18.custom.min.js"></script> 
<script src="js/lightbox.js"></script> 

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/lightbox.js"></script> 現在可以點擊上面的圖片查看效果。

另外需要注意的是，在lightbox.js和lightbox.css檔案中涉及到prev，next，loading等圖片，因此在使用時需要修改這些圖片的路徑。