首页前端开发其他前端知识fckeditor编辑器下的自定义分页符实现方法

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

时间2024-02-10 12:19:03发布访客分类其他前端知识浏览784
导读:收集整理的这篇文章主要介绍了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"> & 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\nfont 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的实现方法

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: fckeditor编辑器下的自定义分页符实现方法
本文地址: https://pptw.com/jishu/608350.html
让IE8和IE9支持eWebEditor在线编辑器的方法 dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法

游客 回复需填写必要信息