扩展FCKeditor，使其具有分页功能

扩展FCKeditor编辑器，使其具有分页功能。

先看效果图：

 

 

 

按以下步骤修改文件：

一、修改配置文件：editor/fckconfig.js
在位置（行92左右）：
              FCKConfig.ToolbarLocation = 'In' ;
增加如下内容：
FCKConfig.PagingCode = '{0}' ;          //{0}：被替换成当“页码”

这里是保存创建分页按钮时的文本，其中的“{0}”会被替换成页码。
二、编辑文件：editor/fckeditor.html
       1、在位置（行55左右）：
              // Base configuration file.
LoadScript( '../fckconfig.js' ) ;
增加如下内容：
//加载分页函数脚本
LoadScript( 'js/paginginfo.js' ) ;

这里是加载一个js脚本文件，用于处理相关的分页操作。
       2、在位置（行225左右）：
              <tr>
                     <td id="xEditingArea" valign="top" style="height: 100%"></td>
              </tr>
增加如下内容：
              <tr>
                  <td id="xPagingInfo" style="height: 25px;">
                     <span id="xPagingAnalyse"  >启用数据分页</span>
                     <span id="xPagingList"></span>
                     <span id="xPagingCreate" style="display:none;"  >添加新页</span>
                     <span id="xPagingDelete" style="display:none;"  >删除当前页</span>
                     <span id="xPagingUnite" style="display:none;"  >合并数据</span>
                     <span id="xPagingMessage" >点击这里执行数据分页</span></td>
              </tr>

这里是增加一个新的行，用来显示分页操作的按钮和信息。

三、向皮肤的CSS文件中增加分页按钮的样式，如默认皮肤文件是editor/skins/default/fck_editor.css，则增加以下内容：
/*分页样式*/

 

#xPagingInfo { font-size:12px; padding: 2px 2px 2px 2px; border: #efefde 1px outset; background-color: #efefde; } #xPagingAnalyse { background-color:#dfdfd8; border-width:1px; border-style:outset; border-color:#f9f9f4 #474742 #474742 #f9f9f4; cursor:default; padding: 2px 5px 1px 5px; float:left; } #xPagingCreate,#xPagingDelete,#xPagingDelete { background-color:#dfdfd8; border-width:1px; border-style:outset; border-color:#f9f9f4 #474742 #474742 #f9f9f4; cursor:default; padding: 2px 5px 1px 5px; margin: 0px 5px 1px 0px; float:left; } #xPagingUnite { color:red; background-color:#dfdfd8; border-width:1px; border-style:outset; border-color:#f9f9f4 #474742 #474742 #f9f9f4; cursor:default; padding: 2px 5px 1px 5px; margin: 0px 5px 1px 0px; float:left; } #xPagingMessage { float:left; padding-left:5px; padding-top:4px; color:red; } .xPageNode1 { background-color:#dfdfd8; border-width:1px; border-style:outset; border-color:#f9f9f4 #474742 #474742 #f9f9f4; cursor:default; padding: 0px 10px 2px 10px; margin: 0px 5px 1px 0px; float:left; } .xPageNode2 { font-weight:bold; color: #ff0000; background-color:#ffffff; border-width:1px; border-style:inset; border-color:#f9f9f4 #474742 #474742 #f9f9f4; cursor:default; padding: 0px 10px 2px 10px; margin: 0px 5px 1px 0px; float:left; }

 

四、创建editor/js/paginginfo.js，该js用于处理分页的操作等，内容如下：

var pagingData = new Array(); var pagingIndex = 0; pagingData[0] = ''; var Paging = { init: function(){ //分页初始化 if(Paging.config() != true){ alert('初始化失败。'); return; } Paging.start = window.parent.document.getElementById(Paging.editor + '___PagingStart').value ; Paging.stop = window.parent.document.getElementById(Paging.editor + '___PagingStop').value ; if(Paging.start.length==0 && Paging.stop.length==0){ alert('参数配置错误。'); return; } document.getElementById('xPagingAnalyse').style.display = 'none' ; document.getElementById('xPagingList').innerHTML = ''; document.getElementById('xPagingCreate').style.display = 'block' ; document.getElementById('xPagingDelete').style.display = 'block' ; document.getElementById('xPagingUnite').style.display = 'block' ; document.getElementById('xPagingMessage').innerHTML = '提交表单前，请先“合并数据”！'; var body = Paging.get(); body = body.replace('<p>'+Paging.start+'</p>',''); body = body.replace('<p>'+Paging.stop+'</p>',''); body = body.replace('<p>'+Paging.stop+Paging.start+'</p>',Paging.stop+Paging.start); var data = body.split(Paging.stop+Paging.start); var index = 0; for(var I = 0 ; I < data.length ; i++){ if(data.length>0){ pagingData[index] = data<span style="font-style: italic;" mce_style="font-style: italic;"> ; document.getElementById('xPagingList').appendChild(Paging.node(index, data<span style="font-style: italic;" mce_style="font-style: italic;">)) ; index++; } }</span></span> pagingIndex=0; Paging.set(pagingData[0]) ; Paging.style(pagingIndex,true); }, create: function(data){ //创建新页 Paging.save(); if (typeof(data) != 'string') data = '' ; var index = pagingData.length ; var span = Paging.node(index, data); Paging.style(pagingIndex,false); pagingIndex = index ; pagingData[pagingIndex] = data ; Paging.set(data) ; document.getElementById('xPagingList').appendChild(Paging.node(index, data)) ; Paging.style(pagingIndex,true); }, go: function(index){ //转到页 if(index != pagingIndex && index >= 0 && index < pagingData.length){ //检测有没有保存 Paging.save(); //切换CSS样式 Paging.style(pagingIndex,false); //写入编辑器内容 pagingIndex = index ; Paging.set(pagingData[pagingIndex]); Paging.style(pagingIndex,true); } }, remove: function(){ //删除分页 var index = pagingIndex; if(index >= 0 && index < pagingData.length){ //检测 if(pagingData.length == 1){ alert("当前只有一个页面，不允许删除！"); return; } if(confirm('确认要删除第 ' + ( pagingIndex +1 ) + ' 页吗？') == false) return; //删除节点 var list = document.getElementById('xPagingList'); list.removeChild(list.childNodes[index]); //更新编辑器内容 Paging.style(pagingIndex,false); if(index == 0){ Paging.set(pagingData[pagingIndex+1]); }else{ pagingIndex --; Paging.set(pagingData[pagingIndex]); } //删除数组元素 document.getElementById('xPagingList').innerHTML = '' ; for ( var i=0 ; I < pagingData.length ; ++I ){ if ( I == index ){ if ( I > pagingData.length/2 ){ for ( var j=I ; j < pagingData.length-1 ; ++j ){ pagingData[j] = pagingData[j+1]; } pagingData.pop(); }else{ for ( var j=I ; j > 0 ; --j ){ pagingData[j] = pagingData[j-1]; } pagingData.shift(); } } } //重新绘制分页信息 for ( var k=0; k< pagingData.length ; k++) { var span = Paging.node(k, pagingData[k]); document.getElementById('xPagingList').appendChild(span) ; } Paging.style(pagingIndex,true); } }, unite: function(){ //合并数据 Paging.save(); var data = ""; var index = 0; for(var I = 0 ; I < pagingData.length ; i++ ){ if(pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> != null && pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> != '' && pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> != '<p></p>'){ index++; if(data == ""){ data = pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> ; }else if(index == 2){ data = Paging.start + data + Paging.stop; data += Paging.start + pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> + Paging.stop; }else{ data += Paging.start + pagingData<span style="font-style: italic;" mce_style="font-style: italic;"> + Paging.stop; } } } pagingData = new Array(); Paging.set(data);</span></span></span></span></span></span> document.getElementById('xPagingAnalyse').style.display = 'block' ; document.getElementById('xPagingList').innerHTML = ''; document.getElementById('xPagingCreate').style.display = 'none' ; document.getElementById('xPagingDelete').style.display = 'none' ; document.getElementById('xPagingUnite').style.display = 'none' ; document.getElementById('xPagingMessage').innerHTML = '数据合并成功，您现在可以提交表单了！'; }, node: function(index,data){ //private var span = document.createElement('span') ; span.id = 'xPage_' + index ; span.className = 'xPageNode1' ; if (typeof(data) != 'string') data = '' ; span.attachEvent("onclick",function(){Paging.go(index);}); span.innerHTML = FCKConfig.PagingCode.replace('{0}',index + 1) ; return span; }, set: function(data,mode){ //private var left = new RegExp("^((<p> </p>)|(</p>)|(/n)|( ))*"); var right = new RegExp("((<p> </p>)|(<p>)|(//n)|( ))*$"); data = data.replace(left,''); data = data.replace(right,''); FCKeditorAPI.GetInstance(Paging.editor).SetHTML(data,mode) ; }, get: function(){ //private return FCKeditorAPI.GetInstance(Paging.editor).GetXHTML(true) ; }, style: function(index,mode){ //private var list = document.getElementById('xPagingList') ; if(index >= 0 && index < list.childNodes.length){ var name = 'xPageNode1' ; if(mode == true) name = 'xPageNode2' ; list.childNodes[index].className = name ; } }, save: function(){ //private if(pagingIndex >= 0 && pagingIndex < pagingData.length){ pagingData[pagingIndex] = Paging.get() ; } }, submit: function(){ //private if(pagingData.length > 1){ alert('请先点击“合并数据”按钮，然后再提交表单。'); return false; } }, config: function(){ //private var iframes = window.parent.frames; for(var i=0 ; I < iframes.length ; i++){ var obj1 = iframes<span style="font-style: italic;" mce_style="font-style: italic;">.document.getElementById('xPagingAnalyse'); var obj2 = document.getElementById('xPagingAnalyse');</span> if(obj1 == obj2){ Paging.editor = iframes<span style="font-style: italic;" mce_style="font-style: italic;">.name.split('___')[0] ;</span> return true; } } return false; } } window.parent.document.forms[0].attachEvent("onsubmit", Paging.submit);