留坑自用,非全部代码!
说明:这段代码节选自我的一个PHP项目中,中间有使用第三方插件,需要使用的请自行baidu。
Javascript代码:
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
uploadJson : '/editor/php/upload_json.php',
fileManagerJson : '/editor/php/file_manager_json.php',
allowFileManager : true
});
/* 点击按钮时打开上传图像的对话框 */
K('#image01').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath01').val(),
//点击确定按钮时返回图像路径
clickFn : function(url, title, width, height, border, align)
{
K('#picPath01').val(url);
//还可以在这里加更多的操作
editor.hideDialog();
changeImage('image01');
}
});
});
});
K('#image02').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath02').val(),
clickFn : function(url, title, width, height, border, align)
{
K('#picPath02').val(url);
editor.hideDialog();
changeImage('image02');
}
});
});
});
K('#image03').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath03').val(),
clickFn : function(url, title, width, height, border, align)
{
K('#picPath03').val(url);
editor.hideDialog();
changeImage('image03');
}
});
});
});
K('#image04').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath04').val(),
clickFn : function(url, title, width, height, border, align)
{
K('#picPath04').val(url);
editor.hideDialog();
changeImage('image04');
}
});
});
});
K('#image05').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath05').val(),
clickFn : function(url, title, width, height, border, align)
{
K('#picPath05').val(url);
editor.hideDialog();
changeImage('image05');
}
});
});
});
K('#image06').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#picPath06').val(),
clickFn : function(url, title, width, height, border, align)
{
K('#picPath06').val(url);
editor.hideDialog();
changeImage('image06');
}
});
});
});
});
function changeImage($picName)
{
switch($picName)
{
case "image01":
var element = document.getElementById('image01');
if (document.getElementById("picPath01").value!=""){
element.src = document.getElementById("picPath01").value;
//document.getElementById("picPath01").value="";
break;
}
case "image02":
var element = document.getElementById('image02');
if (document.getElementById("picPath02").value!=""){
element.src = document.getElementById("picPath02").value;
break;
}
case "image03":
var element = document.getElementById('image03');
if (document.getElementById("picPath03").value!=""){
element.src = document.getElementById("picPath03").value;
break;
}
case "image04":
var element = document.getElementById('image04');
if (document.getElementById("picPath04").value!=""){
element.src = document.getElementById("picPath04").value;
break;
}
case "image05":
var element = document.getElementById('image05');
if (document.getElementById("picPath05").value!=""){
element.src = document.getElementById("picPath05").value;
break;
}
case "image06":
var element = document.getElementById('image06');
if (document.getElementById("picPath06").value!=""){
element.src = document.getElementById("picPath06").value;
break;
}
}
}
function deleteImage($picName)
{
switch($picName)
{
case "image01":
var element = document.getElementById('image01');
document.getElementById("picPath01").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
case "image02":
var element = document.getElementById('image02');
document.getElementById("picPath02").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
case "image03":
var element = document.getElementById('image03');
document.getElementById("picPath03").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
case "image04":
var element = document.getElementById('image04');
document.getElementById("picPath04").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
case "image05":
var element = document.getElementById('image05');
document.getElementById("picPath05").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
case "image06":
var element = document.getElementById('image06');
document.getElementById("picPath06").value="";
element.src = "/images/NOPIC_JPG.jpg";
break;
}
}
function keydown(){ document.getElementById("productTJ").value=Number(document.getElementById("productC").value)*Number(document.getElementById("productK").value)*Number(document.getElementById("productG").value);
}
</script>
前台代码:
<form name="addform" id="addform" action="?act=ok" method="post">
<table cellpadding=0 cellspacing=0 class="table_form" width="100%">
<tr>
<td ><font color="red">*</font>产品类别:</td>
<td id="box_catid">
<select id="catid" name="catid" class="input_select">
<option value="请选择">请选择</option>
<?php echo get_str(0,$catid);?>
</select>
</td>
</tr>
<tr>
<td ><font color="red">*</font>商品名称:</td>
<td>
<input type="text" class="input-text" name="title" id="title" size="55" value="<?php echo $e_rs['商品名称'];?>" />
副标题:<input type="text" class="xy_input" name="Subtitle" id="Subtitle" size="54" value="<?php echo $e_rs['副标题'];?>"/>
<input type="hidden" name="id" value="<?php echo $sxid;?>" />
</td>
</tr>
<tr>
<td ><font color="red">*</font>品牌:</td>
<td>
<input type="text" class="input-text" name="brand" id="brand" size="55" value="<?php echo $e_rs['品牌'];?>" />
商品条码:<input type="text" class="input-text" name="pBarCode" id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />
商品编码:<input type="text" class="input-text" name="pNumCode" id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" />
</td>
</tr>
<tr>
<td ><font color="red">*</font>销售规格:</td>
<td>
<input type="text" class="input-text" name="brand" id="brand" size="55" value="<?php echo $e_rs['销售规格'];?>" />
商品条码:<input type="text" class="input-text" name="pBarCode" id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />
商品编码:<input type="text" class="input-text" name="pNumCode" id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" />
</td>
</tr>
<tr>
<td >正常售价:</td>
<td><input type="text" class="xy_input90" name="priceZC" id="priceZC" size="30" value="<?php echo $e_rs['正常售价'];?>"/> <span class="remarks">【填写数字,默认单位¥】</span>
促销价:<input type="text" class="xy_input90" name="priceCX" id="priceCX" size="30" value="<?php echo $e_rs['促销价'];?>"/> <span class="remarks">【填写数字,默认单位¥】</span>
</td>
</tr>
<tr>
<td >原产地:</td>
<td><input type="text" class="xy_input90" name="productCD" id="productCD" size="30" value="<?php echo $e_rs['原产地'];?>"/>
生产厂家:<input type="text" class="xy_input" name="productCJ" id="productCJ" size="54" value="<?php echo $e_rs['生产厂家'];?>"/>
</td>
</tr>
<tr>
<td >保质期:</td>
<td><input type="text" class="xy_input90" name="EXP" id="EXP" size="30" value="<?php echo $e_rs['保质期'];?>"/> <span class="remarks">【质保天数】</span>
</td>
</tr>
<tr>
<td >产品信息:</td>
<td>
长:
<input type="text" class="xy_input" name="productC" id="productC" size="5" value="<?php echo $e_rs['长度'];?>" onkeyup="keydown()"/> 宽:
<input type="text" class="xy_input" name="productK" id="productK" size="5" value="<?php echo $e_rs['宽度'];?>" onkeyup="keydown()"/> 高:
<input type="text" class="xy_input" name="productG" id="productG" size="5" value="<?php echo $e_rs['高度'];?>" onkeyup="keydown()"/> 【单位:cm】 体积:
<input type="text" class="xy_input" name="productTJ" id="productTJ" size="5" readonly value="<?php echo $e_rs['体积'];?>" style="background:#CCC"/> 重量:
<input type="text" class="xy_input" name="productZL" id="productZL" size="5" value="<?php echo $e_rs['重量'];?>"/>【单位:g】
</td>
</tr>
<tr>
<td >SEO关键字:</td>
<td>
<textarea name="SEOKeyword" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['SEO关键字'];?></textarea> SEO简介
<textarea name="description" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['description'];?></textarea>
</td>
</tr>
<tr>
<td >图片:</td>
<td id="box_pics" align="left">
<table width="880px" border="0" cellspacing="0" cellpadding="0" style=" margin-left:-8px">
<tr>
<td align="center"><strong>主图1</strong></td>
<td align="center"><strong>主图2</strong></td>
<td align="center"><strong>主图3</strong></td>
<td align="center"><strong>主图4</strong></td>
<td align="center"><strong>主图5</strong></td>
<td align="center"><strong>主图6</strong></td>
</tr>
<tr>
<td align="left"><img name="image01" id="image01" src="<?php if ($e_rs['主图1']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图1'];?>" width="125" height="125" onClick="changeImage('image01')" style="border:1px #CCC solid;"><input name="picPath01" id="picPath01" size="55" type="hidden" value="<?php echo $e_rs['主图1'];?>" /></td>
<td align="left"><img name="image02" id="image02" src="<?php if ($e_rs['主图2']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图2'];?>" width="125" height="125" onClick="changeImage('image02')" style="border:1px #CCC solid;"><input name="picPath02" id="picPath02" size="55" type="hidden" value="<?php echo $e_rs['主图2'];?>" /></td>
<td align="left"><img name="image03" id="image03" src="<?php if ($e_rs['主图3']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图3'];?>" width="125" height="125" onClick="changeImage('image03')" style="border:1px #CCC solid;"><input name="picPath03" id="picPath03" size="55" type="hidden" value="<?php echo $e_rs['主图3'];?>" /></td>
<td align="left"><img name="image04" id="image04" src="<?php if ($e_rs['主图4']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图4'];?>" width="125" height="125" onClick="changeImage('image04')" style="border:1px #CCC solid;"><input name="picPath04" id="picPath04" size="55" type="hidden" value="<?php echo $e_rs['主图4'];?>" /></td>
<td align="left"><img name="image05" id="image05" src="<?php if ($e_rs['主图5']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图5'];?>" width="125" height="125" onClick="changeImage('image05')" style="border:1px #CCC solid;"><input name="picPath05" id="picPath05" size="55" type="hidden" value="<?php echo $e_rs['主图5'];?>" /></td>
<td align="left"><img name="image06" id="image06" src="<?php if ($e_rs['主图6']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图6'];?>" width="125" height="125" onClick="changeImage('image06')" style="border:1px #CCC solid;"><input name="picPath06" id="picPath06" size="55" type="hidden" value="<?php echo $e_rs['主图6'];?>" /></td>
</tr>
<tr>
<td align="center"><a onClick="deleteImage('image01')" style="cursor:pointer;">删除</a></td>
<td align="center"><a onClick="deleteImage('image02')" style="cursor:pointer;">删除</a></td>
<td align="center"><a onClick="deleteImage('image03')" style="cursor:pointer;">删除</a></td>
<td align="center"><a onClick="deleteImage('image04')" style="cursor:pointer;">删除</a></td>
<td align="center"><a onClick="deleteImage('image05')" style="cursor:pointer;">删除</a></td>
<td align="center"><a onClick="deleteImage('image06')" style="cursor:pointer;">删除</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td >内容:</td>
<td id="box_content"><textarea name="content" style="width:860px;height:400px;visibility:hidden;"><?php echo $e_rs['文描内容'];?></textarea></td>
</tr>
<tr>
<td ><font color="red">*</font>发布时间:</td>
<td id="box_createtime"><input name="c_date" type='text' class="laydate-icon" id="c_date" value="<?php echo date("Y-m-d h:i:s",$e_rs['发布时间']);?>" /></td>
</tr>
<tr>
<td ><font color="red">*</font>产品发布人:</td>
<td id="box_createtime"><input name="a_author" type='text' id="a_author" class="input-text" size="19" value="<?php echo $e_rs['发布人'];?>" /></td>
</tr>
<tr>
<td >是否推荐商品:</td>
<td id="box_posid">
<select id="is_hot" name="is_hot" class="input_select" >
<option value="0" <?php if($is_hot==0){?> selected="selected"<?php }?>>否</option>
<option value="1" <?php if($is_hot==1){?> selected="selected"<?php }?>>是</option>
</select>
</td>
</tr>
</table>
<div id="bootline"></div>
<div id="btnbox" class="btn">
<INPUT TYPE="submit" value="提交" class="button" >
<input TYPE="reset" value="取消" class="button">
</div>
</form>
用到的NOPIC:
效果图如下: