主题: 动态添加编辑器创建多分页参考
作者: 岽小羊, 发布日期: 2011-07-14 10:42:06, 浏览数: 3661

本程序以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;" />

 

发表新帖 发表回复