修改fckeditor增加自定义按钮，配合大文章分页

最新推荐文章于 2022-02-25 19:38:17 发布

置顶 esnowxu

最新推荐文章于 2022-02-25 19:38:17 发布

阅读量1.6k

点赞数

文章标签： fckeditor function null div 浏览器 c

本文链接：https://blog.csdn.net/esnowxu/article/details/1920361

版权

因为我的大文章分页的后台系统是用的fckeditor所以，我修改了他的代码，增加了自己定义的按钮。我参考了网上的文章，实现思路如下：

1 修改fckeditor的按钮图片，现提供如下。此文件位置在：/FCK/skins/silever/fck_strip.gif。
2 给你的按钮定义名称，我的叫：PageFn，把他放到/FCK/fckconfig.js中，FCKConfig.ToolbarSets["Default"] ，按照他写的格式添加到合适位置。
3 修改说明文件，/FCK/editor/lang/zh-cn.js，在最末尾添加
InsertPageFnLabel : "分页符",
InsertPageFn : "插入分页 "
4 修改js库，这里我只说明针对ie浏览器的js修改。/FCK/editor/fckeditorcode_ie.js
a 找到var FCKPageBreaksProcessor=FCKDocumentProcessor.AppendNew();在此语句结束后加：
var FCKPageFnProcessor=FCKDocumentProcessor.AppendNew();
FCKPageFnProcessor.ProcessDocument=function(A){var B=A.getElementsByTagName('DIV');
var C;
var i=B.length-1;
while (i>=0&&(C=B[i--])){if (C.style.pageBreakAfter=='always'&&C.childNodes.length==1&&C.childNodes[0].style&&C.childNodes[0].style.display=='none'){
var D=FCKDocumentProcessor_CreateFakeImage('FCK__PageFn',C.cloneNode(true));
C.parentNode.insertBefore(D,C);
C.parentNode.removeChild(C);}}};

b 找到var FCKPageBreakCommand=function(){this.Name='PageBreak';};在此语句结束后加：
var FCKPageFnCommand=function(){this.Name='PageFn';};
FCKPageFnCommand.prototype.Execute=function(){
    var e=FCK.EditorDocument.createElement('DIV');
    e.style.pageBreakAfter='always';
    e.innerHTML='<span style="DISPLAY:none">|,|,|,|,|,|</span>';
    var A=FCKDocumentProcessor_CreateFakeImage('FCK__PageBreak',e);
    A=FCK.InsertElement(A);
    };
    FCKPageFnCommand.prototype.GetState=function(){return 0;};

c 找到case 'PageBreak':B=new FCKPageBreakCommand();break;
在后面增加：case 'PageFn':B=new FCKPageFnCommand();break;

d 找到case 'PageBreak':B=new FCKToolbarButton('PageBreak',FCKLang.PageBreakLbl,FCKLang.PageBreak,null,false,true,43);break;
在后面增加：
case 'PageFn':B=new FCKToolbarButton('PageFn',FCKLang.InsertPageFnLabel,FCKLang.InsertPageFn,null,false,true,67);break;
保存即可。
回到调用页看一下，是不是可以实现了？