配合ckEditor分页标签，用javascript编写分页函数，实现文章内容分页

最新推荐文章于 2021-03-18 16:42:35 发布

as66t

最新推荐文章于 2021-03-18 16:42:35 发布

阅读量3.6k

点赞数

分类专栏： javaScript/jQuery 文章标签： ckeditor JavaScript 分页

本文链接：https://blog.csdn.net/as66t/article/details/8519687

版权

本文介绍如何利用JavaScript配合ckEditor的分页标签<div style='page-break-after: always'>，设计一个分页功能。通过搜索标签位置，将内容分段截取并输出换页按钮，实现在不同浏览器中的分页效果。详细介绍了initpg()和searchpg()两个关键函数的实现过程。

摘要由CSDN通过智能技术生成

在初次使用ckEditor文本编辑器过程中发现，其中的“分页”功能（编辑器中的分页按钮）实际的作用只是在文中产生一个带样式的div，并没有提供别的内容。形式如下：

<div style="page-break-after: always">
	<span style="display: none;"> </span></div>

这也许只是用于打印时的分页，要实现浏览的分页可能还没这个能力。于是想在此上设计出一个功能来分页，用户只用在编辑器上选择分页即可。通过观察包含的<span>带有默认隐藏样式，于是最初想到是否在此做文章，但又想到了用javascript的字符串操作非常方便，于是想选用javascript来设计一个解决方法。思想是：搜索并记录文中包含所有此标签的位置（<div style="page-break-after: always">），按索引位置将内容分段截取存入变量，输出换页按钮，通过按钮调用换页函数进行换页。

使用的变量为：

var content=new Object;
var context="";//HTML文本内容
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="";
        //获取节点HT