KindEditor编辑器内容分页js

时间:2022-08-31 15:03:27

      在http://blog.csdn.net/as66t/article/details/8519687这个博客的参考下,进行一些浏览器兼容的小改动

      在初次使用kindEditor文本编辑器过程中发现,其中的“分页”功能(编辑器中的分页按钮)实际的作用只是在文中产生一个带样式的hr标签,并没有提供别的内容。形式如下:

KindEditor编辑器内容分页js

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


一、以下为kindEditor.js文件


二、index.html文件
  1. <div id="nc_con">
  2.      
  3.       //内容

  4.  </div>
  5. <div id="nc_page">

  6.     //分页操作按钮

  7. </div>

  8. <script type="text/javascript">
  9.      initpg();
  10.      searchpg();
  11. </script>