列印本頁 - [問題]如何將lightbox 的 ref 加入 htmlarea

下午试了，成功，不算太复杂。
我是 lt1.0.3 加 tinymce2.0.5（这个版本来自于svn Lt1.1，Mark搞的），如果是 htmlarea ，第6步不用做，其它一样。
主要步骤有：
1、上传 lightbox 至 /js目录下，现在 lightbox.js 的路径为 /js/lightbox202/js/lightbox.js ，这个路径等会儿要用到。
2、修改 lightbox.css 中背景图像url为正确路径，有三处。
3、修改 lightbox.css 中 #imageData 定义中加入一行：

程式碼:

font: 9pt Verdana, Helvetica, sans-serif;

这将会使图片描述字体大一些，对我们中文用户必须要加。
4、修改每一个Template的head.template，在</head>前加入：

程式碼:

<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/prototype.js")}"></script>
<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/scriptaculous.js?load=effects")}"></script>
<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/lightbox.js")}"></script>
<link rel="stylesheet" href="{$url->getUrl("/js/lightbox202/css/lightbox.css")}" type="text/css" media="screen" />

5、修改tinymce下面的htmlarea-plog-resourcelist.js文件中的 _generateResourceLink 函数：
var htmlCode = '';
if( type == 1 ) {
     // if the resource is an image, check the second parameter to see wether we'd like
     // to show the preview with a link to the real size image or the real image
     // inlined with the text
     if( preview == 1 ) {
        htmlCode = '<a id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'" rel="lightbox" title="'+resourceDesc+'">';
        htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=preview" />';
        htmlCode += '</a>';
     }
      else if ( preview == 2 ) {
        htmlCode = '<a id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'" rel="lightbox" title="'+resourceDesc+'">';
        htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=medium" />';
        htmlCode += '</a>';
      }
红色为新加。
6、由于tinymce对html进行了清理，所以在 tiny_mce-plog.js 文件中 extended_valid_elements 中 a 标签加入 "|rel"，以允许rel属性。
好了。

刚才忘了，补充7、在lightbox.js中还要修改：
var fileLoadingImage = "/js/lightbox202/images/loading.gif";
var fileBottomNavCloseImage = "/js/lightbox202/images/closelabel.gif";
这两个图片路径。
demo: 还是不写了。。。免得被人说侵权。。。

LifeType 中文開發論壇

開發 => 核心補強 => 主題作者是: lorenhsu1128 於四月 11, 2006, 10:52:02 上午

LifeType 中文開發論壇

開發 => 核心補強 => 主題作者是: lorenhsu1128 於 四月 11, 2006, 10:52:02 上午

開發 => 核心補強 => 主題作者是: lorenhsu1128 於四月 11, 2006, 10:52:02 上午