在http://blog.csdn.net/as66t/article/details/8519687这个博客的参考下,进行一些浏览器兼容的小改动
在初次使用kindEditor文本编辑器过程中发现,其中的“分页”功能(编辑器中的分页按钮)实际的作用只是在文中产生一个带样式的hr标签,并没有提供别的内容。形式如下:
这也许只是用于打印时的分页,要实现浏览的分页可能还没这个能力。于是想在此上设计出一个功能来分页,用户只用在编辑器上选择分页即可。通过观察包含的带有默认隐藏样式,于是最初想到是否在此做文章,但又想到了用JavaScript的字符串操作非常方便,于是想选用javascript来设计一个解决方法。思想是:搜索并记录文中包含所有此标签的位置(),按索引位置将内容分段截取存入变量,输出换页按钮,通过按钮调用换页函数进行换页。
一、以下为kindEditor.js文件
var content=new Object;
var context="";
var pgindex=[];
var cont=[];
var pagesel="";
var contpg=0;
/*initpg()用于初始化和置空变量并搜索标签位置:*/
function initpg() {
contpg = 0;
pgindex.splice(0, pgindex.length);
pgindex[0] = 0;
cont.splice(0, cont.length);
pagesel = "";
content = document.getElementById("nc_con");
context = content.innerHTML;
/*于是将关键字缩小到不包含分号并在头部加入浏览器判断:*/
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject){//适用ie9和ie10版本
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
}else if (!!window.ActiveXObject || "ActiveXObject" in window){//适用ie11版本
Sys.ie="11";
}
/*在实际使用中发现,chrome和FF测试均通过,IE却不行,仔细试验发现,在不同浏览器生成的标签是不同的(部分IE下为大写字母,并且存在有;和没有;的差异)*/
if (Sys.ie) {
var i = 0;
var j = 1;
var tmpp = 0;
while (tmpp = context.indexOf("
", i)) {
if (tmpp != -1) {
pgindex[j++] = tmpp;
i = tmpp + 30;
} else {
break;
}
}
}
}
/*pagese()依据当前所在页码确定所需的控制换页按钮选项,即pagesel的内容,pagesel在searchpg()中被使用。*/
function searchpg(){
if(pgindex.length>1){
for(var i=0;i
0){
if(contpg==0){
pagesel="
"+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
首 页
上一页
下一页
末 页";
}else if(contpg!=0&&contpg
"+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
首 页
上一页
下一页
末 页";
}else if(contpg==cont.length-1){
pagesel="
"+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
首 页
上一页
下一页
末 页";
}
}else {
pagesel="";
//pagesel="
文章共1页 当前第1页
";
}
}
/*按钮触发的换页动作依据nextpa()、prepa()、firstpa()、endpa()几个函数产生 */
function nextpa(){
contpg++;
pagese();
content.innerHTML=cont[contpg];
document.getElementById("nc_page").innerHTML=pagesel;
}
function prepa(){
contpg--;
pagese();
content.innerHTML=cont[contpg];
document.getElementById("nc_page").innerHTML=pagesel;
}
function firstpa(){
contpg=0;
pagese();
content.innerHTML=cont[contpg];
document.getElementById("nc_page").innerHTML=pagesel;
}
function endpa(){
contpg=cont.length-1;
pagese();
content.innerHTML=cont[contpg];
document.getElementById("nc_page").innerHTML=pagesel;
}
二、index.html文件
- //内容
- //分页操作按钮
- initpg();
- searchpg();