Adding Lightbox for Image Plugin in Tinymce

版权所有，转载请注明出处：http://guangboo.org/2013/05/11/adding-lightbox-image-plugin-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的格式要求：

<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方法。该方法的最后几段代码如下：

....
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 {
	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，要求的文件有：

<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等图片，因此在使用时需要修改这些图片的路径。