主题: 动态添加编辑器创建多分页参考 |
作者: 岽小羊, 发布日期: 2011-07-14 10:42:06, 浏览数: 3736 |
本程序以Asp为例,主要在JS,仅供大家参考。如果看懂了其它语言同用。 可以在下面加也可以在任意编辑器下面加入新的编辑器。
<script language="javascript" type="text/javascript">
//这个是用来将所有编辑器内容保存到contents文本框中的
function contents(){
var obj=document.getElementsByName("content");
var str="";
for(i=0;i<obj.length;i++){
//if(KE.html('content'+i)!=""){
//KE.sync(obj[i].id);
str=str+obj[i].value+"<!--pagebreak-->";
//}
}
document.getElementById("contents").value=str;
//alert(str);
}
</script>
<div id="c_1_cot"> <textarea name="contents" id="contents" style=" display:none;"></textarea> 用来保存所有编辑器内容的隐藏文本框,提交时记得将所有编辑器内容加在一起别忘了加上分页符 <% '这里是读取数据库我用的分页符是<!--pagebreak--> 在这里读取出来当前的各分页内容 dim scontent,snum scontent=split(rs("content"),"<!--pagebreak-->") snum=ubound(scontent)-1 '得到分页总数 if snum<0 then snum=0
for i=0 to snum '循环显示已保存的分页 %> <script type="text/javascript"> KE.show({ id : 'content<%=i%>', resizeMode : 1 }); </script> <%if i>0 then%> <div class="pagebreak" id="pagebreak<%=i%>"><span id="pagespan<%=i%>">第<%=i+1%>页</span><a href="javascript:void(0);" onClick="deledit(<%=i%>);" title="移除"></a></div> <%end if%> <textarea name="content" id="content<%=i%>" style="width:100%; height:500px; display:none;"><%=scontent(i)%></textarea> <%next%> </div> <script type="text/javascript"> var editnum=<%=snum%>; var pagenum=editnum; //动态添加编辑器 function addedit(id){ editnum=editnum+1; pagenum=pagenum+1; //alert(editnum);
if(KE.browser.IE && KE.browser.VERSION < 9){ var textarea = document.createElement('<textarea name="content"></textarea>') //这里判断下浏览器以不同的方式创建,否则会不兼容,万恶的IE.以不以不 }else{ var textarea=document.createElement('textarea');
} var span = document.createElement('div'); span.innerHTML="<span id='pagespan"+editnum+"'>第"+(pagenum+1)+"页</span><a href='javascript:void(0);' onclick='deledit("+editnum+");' title='移除'></a>"; span.className="pagebreak"; span.id='pagebreak'+editnum; //在上面这我创建了一个显示编辑器编号的层。样式要自己写啊
textarea.style.cssText = 'width:100%; height:300px; display:none;'; textarea.id = 'content'+editnum; textarea.name = "content"; var refChild=document.getElementById(id);
//document.getElementById('c_1_cot').appendChild(span); //这里的ID是编辑器的ID 如果ID为空则在最后加入,如果有ID则在此编辑器的下面加入 if(id){ document.getElementById('c_1_cot').insertBefore(textarea,refChild.nextSibling); document.getElementById('c_1_cot').insertBefore(span,refChild.nextSibling); }else{ document.getElementById('c_1_cot').insertBefore(span,null); document.getElementById('c_1_cot').insertBefore(textarea,null); } orderedit();
KE.init({ id : 'content'+editnum, resizeMode : 1
}); KE.create('content'+editnum); //KE.util.focus('content'+editnum); }
//移除编辑器 function deledit(num,pnum){ KE.html('content'+num, ''); KE.remove('content'+num, 0); var obj1=document.getElementById('content'+num); var obj2=document.getElementById('pagebreak'+num); //obj1.style.height="0px"; //obj1.style.display="none"; document.getElementById("c_1_cot").removeChild(obj1); document.getElementById("c_1_cot").removeChild(obj2); pagenum=pagenum-1; orderedit(); } //编辑器页码排序 //如果移除了编辑器,那页码就要重排了,下面就是了.. function orderedit(){
var tnum=1; var obj=document.getElementsByName("content"); var str=""; for(i=1;i<obj.length;i++){ str=obj[i].id; str="pagespan"+str.replace("content",""); tnum=tnum+1; //alert(str); document.getElementById(str).innerHTML="第"+tnum+"页";
} } </script> <%end if%> </div>
<input name="" type="button" onClick="addedit();" value="+ 添加分页" style="float:right; margin-right:10px;" />
|