• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >网页编辑器 > fckeditor编辑器下的自定义分页符实现方法

fckeditor编辑器下的自定义分页符实现方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-06-05

本文主要包含fckeditor编辑器,fckeditor编辑器漏洞,fckeditor编辑器asp,fckeditor文本编辑器,fckeditor编辑器下载等相关知识,希望在学习及工作中可以帮助到您

这里小编参考了几篇文章特为大家整理下,用到的朋友多支持一下了。

进行长文章分页,编辑人员在控制分页符的时候手工插入很麻烦,所以修改了FCK的插入分页符的插入字符:
修改方法:
打开/editor/js/
找到fckeditorcode_gecko.js和fckeditorcode_ie.js
因为fck有二个js文件。fckeditorcode_gecko.js是针对非ie的。一个是针对ie的。所以我们需要更改二个js的文件。
这样方便我们以后插入分页时,就不需要那么一大串的了。
找到:
var FCKPageBreakCommand=function(){this.Name='PageBreak';};FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();var e=FCK.EditorDocument.createElement('Div')
以及其后字符,修改为你自己的分页符即可

fck分页符修改

     FKC默认添加的分页符为:<div style="page-break-after: always"><span style="display: none"> </span></div>

      对文章的分页,我是运用String.split("分页符")方法,将文章以分页符为分割点,返回一个String类型的数组,但是双引号不能够相互嵌套,split()方法中的参数就没办法设置。
      如何修改默认的分页符:

      找到js文件:在/fckeditor/editor/js/目录下,需要修改的有两个js文件:fckeditorcode_ie.js(针对IE浏览器的配置)、fckeditorcode_gecko.js(针对非IE浏览器的配置)。
      在js文件中找到如下代码,并做修改:

  var FCKPageBreakCommand=function() 
   {this.Name='PageBreak';}; 
  FCKPageBreakCommand.prototype.Execute=function() 
   {FCKUndo.SaveUndoStep(); 
  var e=FCK.EditorDocument.createElement('DIV'); //这里是创建<div>标签,此处不用修改 
  e.style.pageBreakAfter='always';       //这里是为<div>添加样式,把它删掉; 
  e.innerHTML='<span style="DISPLAY:none"> </span>'; 
//这里是在<div>中添加的内容,修改一下; 我的是修改为e.innerHTML='[jb51page]'; 也就是仅有一个空格;

</div>

      保存,重新添加文章,添加文章时看不出变化,保存看查看数据,分页符的位置变为: <div>[jb51page]</div>
      为文章分页就可以用split("<div>[jb51page]</div>")方法进行拆分显示了;

以下是参考了dedecms的方法:
大家在修改的时候一定要看清原来的fckeditor分页的写法,千万不要直接覆盖,容易出问题。

dedecms的方法:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
var e=FCK.EditorDocument.createElement('P');e.innerHTML='[jb51page]';
</div>

用的方法:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
FCK.EditorDocument.selection.createRange().text='[jb51page]';
</div>

注意:由于我们使用的版本,有FCKUndo.SaveUndoStep();如果不带出现了编辑器无法显示的情况。大家根据需要修改。

后面发现了dedecms增加的小功能,里面的函数不错可以参考下

var FCKLineBrCommand=function(){this.Name='LineBr';};
FCKLineBrCommand.prototype.Execute=function(){FCK.EditorDocument.selection.createRange().pasteHTML("<br/>");};
FCKLineBrCommand.prototype.GetState=function(){return 0;}

var FCKQuoteCommand=function(){this.Name='Quote';};
FCKQuoteCommand.prototype.Execute=function(){
	var quoteString = "<table style='border-right: #cccccc 1px dotted; table-layout: fixed; border-top: #cccccc 1px dotted; border-left: #cccccc 1px dotted; border-bottom: #cccccc 1px dotted' cellspacing=0 cellpadding=6 width='95%' align=center border=0>\r\n";
 quoteString += "<tr><td style='word-wrap: break-word' bgcolor='#fdfddf'>\r\n<font color='#FF0000'>以下为引用的内容:</font><br>\r\n";
 quoteString += "</td></tr></table>\r\n";
	FCK.EditorDocument.selection.createRange().pasteHTML(quoteString);
};
FCKQuoteCommand.prototype.GetState=function(){return 0;}
</div> </div>

您可能想查找下面的文章:

  • fckeditor编辑器下的自定义分页符实现方法
  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程
  • FCKeditor编辑器添加图片上传功能及图片路径问题解决方法
  • FCKeditor smarty 编辑器的应用PHP
  • ThinkPHP中FCKeditor编辑器的使用方法
  • fckeditor编辑器在php中的配置方法
  • 网页编辑器FCKeditor 2.6.4精简配置方法
  • FCKeditor 2.6.5 ASP环境安装配置使用说明
  • FCKeditor 2.6.6在ASP中的安装及配置方法分享
  • Fckeditor编辑器内容长度限制统计实现方法

相关文章

  • 2017-06-05FCKeidtor 清除编辑器内容的代码
  • 2017-06-05CKEditor 附插入代码的插件
  • 2017-06-05百度编辑器二次开发常用手记整理小结
  • 2017-06-05fckeditor编辑器在php中的配置方法
  • 2017-06-05xheditor所见即所得文本编辑器(代码高亮显示修改)
  • 2017-06-05FCK判断内容是否为空(如果只是去空格,那么这种方式是错误的)
  • 2017-09-27wangEditor使用AJAX异步上传图片
  • 2017-06-05解决FCKEditor在IE10、IE11下的不兼容问题
  • 2017-06-05Ueditor百度编辑器的Html模式自动替换样式的解决方法
  • 2017-06-05xhEditor编辑器入门基础

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • FCKEDITOR 相关函数介绍
    • 让IE8和IE9支持eWebEditor在线编辑器的方法
    • Fckeditor XML Request error:internal server error (500) 解决方法小结
    • javascript 在线文本编辑器实现代码
    • FCKEditor 自定义用户目录的修改步骤 (附源码)
    • CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入图片)
    • 在kindEditor中获取当前光标的位置索引的实现代码
    • 百度ueditor组件上传图片后如何设置img里的alt属性
    • XHEditor编辑器使用文档
    • 解决SyntaxHighlighter 代码高亮不换行问题的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有