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

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

原创

最新推荐文章于 2021-03-18 16:42:37 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ckeditor #JavaScript #分页

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

在初次使用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()用于初始化和置空变量并搜索标签位置：

最低0.47元/天解锁文章