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

2023-12-07 0 591

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

进行长文章分页,编辑人员在控制分页符的时候手工插入很麻烦,所以修改了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\”>&nbsp;</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\”>&nbsp;</span>\’;
//这里是在<div>中添加的内容,修改一下; 我的是修改为e.innerHTML=\'[jb51page]\’; 也就是仅有一个空格;

保存,重新添加文章,添加文章时看不出变化,保存看查看数据,分页符的位置变为: <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]\’;

悠久资源网用的方法:

复制代码 代码如下:
var FCKPageBreakCommand=function(){this.Name=\’PageBreak\’;};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
FCK.EditorDocument.selection.createRange().text=\'[jb51page]\’;

注意:由于我们使用的版本,有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;}

您可能感兴趣的文章:

  • Smarty中调用FCKeditor的方法
  • FCKeditor smarty 编辑器的应用PHP
  • 实例(Smarty+FCKeditor新闻系统)
  • fckeditor粘贴Word时弹出窗口取消的方法
  • FCKeditor + SyntaxHighlighter 让代码高亮着色插件
  • 探讨fckeditor在Php中的配置详解
  • 将FCKeditor导入PHP+SMARTY的实现方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 网页编辑器 fckeditor编辑器下的自定义分页符实现方法 https://www.u-9.cn/biancheng/bianji/125818.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务