本文介绍了如何在Ecmall平台上添加编辑条并集成图片批量上传功能，详细阐述了图片批量上传的初始化过程。
一、添加编辑条：
/* add by tb 2012.02.22 所见即所得编辑器 */
$this->assign('build_editor_tbtest', $this->_build_editor(array(
'name' => 'description_tbtest',
'content_css' => SITE_URL . "/themes/store/{$template_name}/styles/{$style_name}" . '/shop.css', // for preview
)));
/* end by tb 2012.02.22 所见即所得编辑器 */2、调用：（模板 html）
<head>
{$build_editor_tbtest} // 在头部位置添加此代码。 （就是 步骤1 定义富文本编辑器 ID）
</head>
/* html 代码：（textarea id名 和 初始化“name”值相同）*/
<div>
<h5>{$lang.description}</h5>
<textarea name="description_tbtest" id="description_tbtest" style="width:100%; height:400px;">
{$goods.description_tbtest|escape}
</textarea>
</div>
二、添加图片上传
1、初始化图片批量上传器
/* 编辑器图片批量上传器_tbtest */
$this->assign('editor_upload_tbtest', $this->_build_upload(array(
'obj' => 'EDITOR_SWFU_tbtest',
'belong' => BELONG_AUDITGOODS,
'item_id' => $id,
'button_text' => Lang::get('bat_upload'),
'button_id' => 'editor_upload_button_tbtest',
'progress_id' => 'editor_upload_progress_tbtest',
'upload_url' => 'index.php?app=swfupload&instance=desc_image_tbtest',
'if_multirow' => 1,
'ext_js' => false,
'ext_css' => false,
)));2、html 页面
<div class="editor">
<div>
<h5>{$lang.description}</h5>
<textarea name="description_tbtest" id="description_tbtest" style="width:100%; height:400px;">
{$goods.description_tbtest|escape}
</textarea>
</div>
<div style=" position: relative; top: 10px; z-index: 5;"><a class="btn3" id="open_editor_uploader_tbtest">{$lang.uploadedfile}</a>
<div class="upload_con" id="editor_uploader_tbtest" style="display:none">
<div class="upload_con_top"></div>
<div class="upload_wrap">
<ul>
<li>
<div id="divSwfuploadContainer">
<div id="divButtonContainer">
<span id="editor_upload_button_tbtest"></span>
</div>
</div>
</li>
<li><iframe src="index.php?app=comupload&act=view_iframe&id={$id}&belong={$belong}&instance=desc_image_tbtest" width="86" height="30" scrolling="no" frameborder="0"></iframe></li>
<li id="open_editor_remote" class="btn2">{$lang.rem_upload}</li>
</ul>
<div id="editor_remote" class="upload_file" style="display:none">
<iframe src="index.php?app=comupload&act=view_remote&id={$id}&belong={$belong}&instance=desc_image_tbtest" width="272" height="39" scrolling="no" frameborder="0"></iframe>
</div>
<div id="editor_upload_progress_tbtest"></div>
<div class="upload_txt">
<span>{$lang.note_for_upload}</span>
</div>
</div>
<div class="upload_con_bottom"></div>
</div>
</div>
<ul id="desc_images_tbtest" class="preview">
<!--{foreach from=$desc_images_tbtest item=desc_image_tb}-->
<li ectype="handle_pic" hover_tag="description_tbtest" file_name="{$desc_image_tb.file_name|escape}" file_path="{$desc_image_tb.file_path}" file_id="{$desc_image_tb.file_id}">
<input type="hidden" name="desc_file_id[]" value="{$desc_image_tb.file_id}">
<div class="pic">
<img src="{$site_url}/{$desc_image_tb.file_path}" width="50" height="50" alt="{$desc_image_tb.file_name|escape}" title="{$desc_image_tb.file_name|escape}" /></div>
<div ectype="handler" class="bg">
<img src="{$site_url}/{$desc_image_tb.file_path}" width="50" height="50" alt="{$desc_image_tb.file_name|escape}" title="{$desc_image_tb.file_name|escape}" />
<p class="operation">
<a class="cut_in" ectype="insert_editor" href="javascript:void(0);" ecm_title="{$lang.insert_editor}"></a>
<span class="delete" ectype="drop_image" ecm_title="{$lang.drop}"></span>
</p>
<p title="{$desc_image_tb.file_name|escape}" class="name">{$desc_image_tb.file_name|escape}</p>
</div>
</li>
<!--{/foreach}-->
</ul>
<div class="clear"></div>
</div> 3、在includes/libraries/javascript/member.js 中添加如下代码：
//....在
// 打开编辑器图片上传器
$('#open_editor_uploader').unbind('click');
$('#open_editor_uploader').click(function(){
if($('#editor_uploader').css('display') == 'none'){
$('#editor_uploader').show();
}else{
$('#editor_uploader').hide();
}
});
//....后添加：
$('#open_editor_uploader_tbtest').unbind('click');
$('#open_editor_uploader_tbtest').click(function(){
if($('#editor_uploader_tbtest').css('display') == 'none'){
$('#editor_uploader_tbtest').show();
}else{
$('#editor_uploader_tbtest').hide();
}
});
4、 修改html代码中div 的 id 与menber.js 中 设置的一致。
<div style=" position: relative; top: 10px; z-index: 5;"><a class="btn3" id="open_editor_uploader_tbtest">{$lang.uploadedfile}</a>
<div class="upload_con" id="editor_uploader_tbtest" style="display:none">
5、修改单个文件上传参数：
<li><iframe src="index.php?app=comupload&act=view_iframe&id={$id}&belong={$belong}&instance=desc_image_tbtest" width="86" height="30" scrolling="no" frameborder="0"></iframe></li>
（改成相对应的）instance=desc_image_tbtest
6、在本页面 function add_uploadedfile JS方法中，添加如下代码：
else if(file_data.instance == 'desc_image_tbtest'){
// $('#desc_images_tb').append('<li file_name="'+ file_data.file_name +'" file_path="'+ file_data.file_path +'" ectype="handle_pic" file_id="'+ file_data.file_id +'"><input type="hidden" name="desc_file_id[]" value="'+ file_data.file_id +'"><div class="pic" style="z-index: 2;"><img src="{$site_url}/'+ file_data.file_path +'" width="50" height="50" alt="'+ file_data.file_name +'" /></div><div ectype="handler" class="bg" style="z-index: 3;display:none"><img src="{$site_url}/'+ file_data.file_path +'" width="50" height="50" alt="'+ file_data.file_name +'" /><p class="operation"><a href="javascript:void(0);" class="cut_in" ectype="insert_editor" ecm_title="{$lang.insert_editor}"></a><span class="delete" ectype="drop_image" ecm_title="{$lang.drop}"></span></p><p class="name">'+ file_data.file_name +'</p></div></li>');
$('#desc_images_tbtest').append(build_image_handle(file_data, 'description_tbtest') );
trigger_uploader();
if(EDITOR_SWFU_tbtest.getStats().files_queued == 0){
window.setTimeout(function(){
$('#editor_uploader').hide();
},5000);
}
}7、修改：显示图片的层的Id
<ul id="desc_images_tbtest" class="preview">
扫一扫
3919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
