扩展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左右):
增加如下内容:
启用数据分页
添加新页
删除当前页
合并数据
点击这里执行数据分页
这里是增加一个新的行,用来显示分页操作的按钮和信息。
三、向皮肤的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.edito r + '___PagingStart').value ; Paging.stop = window.parent.document.getElementById(Paging.edito r + '___PagingStop').value ; if(Paging.start.length==0 && Paging.stop.length==0){ alert('参数配置错误。'); return; } document.getElementById('xPagingAnalyse').style.di splay = 'none' ; document.getElementById('xPagingList').innerHTML = ''; document.getElementById('xPagingCreate').style.dis play = 'block' ; document.getElementById('xPagingDelete').style.dis play = 'block' ; document.getElementById('xPagingUnite').style.disp lay = 'block' ; document.getElementById('xPagingMessage').innerHTM L = '提交表单前,请先"合并数据"!'; var body = Paging.get(); body = body.replace(''+Paging.start+'',''); body = body.replace(''+Paging.stop+'',''); body = body.replace(''+Paging.stop+Paging.start+'',Pag ing.stop+Paging.start); var data = body.split(Paging.stop+Paging.start); var index = 0; for(var I = 0 ; I 0){ pagingData[index] = data ; document.getElementById('xPagingList').appendChild (Paging.node(index, data)) ; index++; } } 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 = 0 && index pagingData.length/2 ){ for ( var j=I ; j 0 ; --j ){ pagingData[j] = pagingData[j-1]; } pagingData.shift(); } } } //重新绘制分页信息 for ( var k=0; k != null && pagingData != '' && pagingData != ''){ index++; if(data == ""){ data = pagingData ; }else if(index == 2){ data = Paging.start + data + Paging.stop; data += Paging.start + pagingData + Paging.stop; }else{ data += Paging.start + pagingData + Paging.stop; } } } pagingData = new Array(); Paging.set(data); document.getElementById('xPagingAnalyse').style.di splay = 'block' ; document.getElementById('xPagingList').innerHTML = ''; document.getElementById('xPagingCreate').style.dis play = 'none' ; document.getElementById('xPagingDelete').style.dis play = 'none' ; document.getElementById('xPagingUnite').style.disp lay = 'none' ; document.getElementById('xPagingMessage').innerHTM L = '数据合并成功,您现在可以提交表单了!'; }, 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(in dex);}); span.innerHTML = FCKConfig.PagingCode.replace('{0}',index + 1) ; return span; }, set: function(data,mode){ //private var left = new RegExp("^(( )|()|(/n)|( ))*"); var right = new RegExp("(( )|()|(//n)|( ))*$"); data = data.replace(left,''); data = data.replace(right,''); FCKeditorAPI.GetInstance(Paging.editor).SetHTML(da ta,mode) ; }, get: function(){ //private return FCKeditorAPI.GetInstance(Paging.editor).GetXHTML(t rue) ; }, style: function(index,mode){ //private var list = document.getElementById('xPagingList') ; if(index >= 0 && index = 0 && pagingIndex 1){ alert('请先点击"合并数据"按钮,然后再提交表单。'); return false; } }, config: function(){ //private var iframes = window.parent.frames; for(var i=0 ; I .document.getElementById('xPagingAnalyse') ; var obj2 = document.getElementById('xPagingAnalyse'); if(obj1 == obj2){ Paging.editor = iframes.name.split('___')[0] ; return true; } } return false; } } window.parent.document.forms[0].attachEvent("onsub mit", Paging.submit);
发表评论
-
C/C++字符串使用军规
2012-07-06 09:51 1308C/C++字符串使用军规 本文对常见的C++ stri ... -
C#----初识正则表达式
2012-07-06 09:44 622正则表达式多用在验证输入有效性上。.NET有专门的类来使用 ... -
VBscript中的正则表达式
2012-07-06 09:37 730VBscript中的正则表达式 在VBscript中, ... -
3dmax导出插件-tiamo
2012-07-06 09:29 785学无止境,三人行 ... -
masm32开发com组件
2012-07-03 13:42 622标题: masm32开发com组件介绍[一][二][三] ... -
masm32开发com组件
2012-07-03 12:17 732标题: masm32开发com组件介绍[一][二][三] ... -
关于js插入页面元素问题 在js中创建html元素并在 引入js的地方直接显示
2012-07-02 10:14 1259最近开发网页,有许多组件需要js的方式引入 有个需求 ... -
深入SVG路径~~~在DEGRAFA中使用PATH
2012-07-02 10:14 807在W3SCHOOL的SVG教程 中 可以看出,SVG除了内 ... -
JAVA+fms
2012-07-02 10:14 801最近完成的 Java Flex Fms 视频聊天程序,虽然 ... -
3D 视频墙 3D IMAGE/MEDIA GRID/WALL GALLERY
2012-07-02 10:14 602If you are interested with th ... -
flashdevelop Build halted with errors (fcsh).
2012-07-02 09:42 808... -
flex 读取配置文件 与PHP交互 圆饼图
2012-07-01 09:34 475FLEX文件 teacherevalute.mxml ... -
Flex加载文件数据流
2012-07-01 09:34 715Flex加载文件数据流 本文使用URLStream, ... -
在Flex控件中使用XMLListCollection
2012-07-01 09:34 466现在,应用程序已 ... -
Flex form 提交list数据表单
2012-07-01 09:34 982在Flex+J2EE开发中,采用动态脚本的方式提交一个li ... -
flex 界面改进
2012-07-01 09:34 509f 代码如下: HTT ... -
CiscoVPN Client Error 1720问题的解决方法
2012-06-30 17:52 1161CiscoVPN Client Error 1720问题 ... -
IE8不能正常登录网上银行的解决方法
2012-06-30 17:52 709一、关于IE8的"启用内存保护帮助减少联机攻击& ... -
英文Windows无法打开中文名CHM文件的解决方法
2012-06-30 17:52 760win2003英文版中,直接打开一个带中文名称的chm文件 ... -
Adobe flash cs5 的Java运行时环境初始化错误 完美解决方法
2012-06-30 17:52 709下载网络上的Adobe f ...
相关推荐
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在...
myGrid支持很多操作功能,比如导入导出数据,右键,过滤,搜索,分页数选择等等,myForm支持 单列跟双列两种模式,支持下拉分页,fckeditor,文件上传等控件,具体大家可以根据myForm自己去扩展自己的控件
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统...
集成系统内置了世界著名的开源编辑器FckEditor的HTML在线编辑系统,可在后台选择默认、简洁、超简洁等模式,使编辑文章能所见所得,添加新闻时还可根据分页标签自动分页。 二、其他功能 1、在线系统设置。在系统设置...
简单的会员功能及强大的可扩展功能 ================================================== X-Blog 更新说明 如需要帮助和程序有BUG,请到我的BLOG(http://blog.ybpz.com)提出 ==================================...
FCKeditor在线编辑器插件.mxp Flash效果文字插件.mxp IE4以上的转场效果.mxp IE标题栏的文字滚动插件.mxp insert_greeting.mxp jump menu插件.mxp Marquee.mxp Meta扩展插件.mxp MX183945_compare_fields.mxp My...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...