fckeditor編輯器下的自定義分頁符實現(xiàn)方法

來源：本站原創(chuàng)|時間：2020-01-11|欄目：網(wǎng)頁編輯器|點擊：次

這里我們小編參考了幾篇文章特為大家整理下，用到的朋友多支持一下了。

進行長文章分頁，編輯人員在控制分頁符的時候手工插入很麻煩，所以修改了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類型的數(shù)組，但是雙引號不能夠相互嵌套，split（）方法中的參數(shù)就沒辦法設(shè)置。
如何修改默認的分頁符：

找到j(luò)s文件：在/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'); //這里是創(chuàng)建<div>標簽，此處不用修改 
  e.style.pageBreakAfter='always';       //這里是為<div>添加樣式，把它刪掉； 
  e.innerHTML='<span style="DISPLAY:none"> </span>'; 
//這里是在<div>中添加的內(nèi)容,修改一下; 我的是修改為e.innerHTML='[jb51page]'; 也就是僅有一個空格;

保存,重新添加文章,添加文章時看不出變化,保存看查看數(shù)據(jù),分頁符的位置變?yōu)? <div>[jb51page]</div>
為文章分頁就可以用split("<div>[jb51page]</div>")方法進行拆分顯示了;

以下是參考了dedecms的方法：
大家在修改的時候一定要看清原來的fckeditor分頁的寫法，千萬不要直接覆蓋，容易出問題。

dedecms的方法：

復(fù)制代碼代碼如下:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};

FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();

var e=FCK.EditorDocument.createElement('P');e.innerHTML='[jb51page]';

我們用的方法：

復(fù)制代碼代碼如下:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};

FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();

FCK.EditorDocument.selection.createRange().text='[jb51page]';

注意：由于我們使用的版本，有FCKUndo.SaveUndoStep();如果不帶出現(xiàn)了編輯器無法顯示的情況。大家根據(jù)需要修改。

后面發(fā)現(xiàn)了dedecms增加的小功能，里面的函數(shù)不錯可以參考下

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'>以下為引用的內(nèi)容：</font><br>\r\n";
 quoteString += "</td></tr></table>\r\n";
	FCK.EditorDocument.selection.createRange().pasteHTML(quoteString);
};
FCKQuoteCommand.prototype.GetState=function(){return 0;}

上一篇：SyntaxHighlighter配合CKEditor插件輕松打造代碼語法著色

欄目：網(wǎng)頁編輯器

下一篇：百度編輯器ueditor前臺代碼高亮無法自動換行解決方法

本文標題：fckeditor編輯器下的自定義分頁符實現(xiàn)方法

本文地址：http://www.jygsgssxh.com/a1/wangyebianjiqi/11804.html

更多網(wǎng)頁編輯器

雷火电竞-中国电竞赛事及体育赛事平台

網(wǎng)頁編輯器

fckeditor編輯器下的自定義分頁符實現(xiàn)方法

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀