fckeditor編輯器下的自定義分頁符實(shí)現(xiàn)方法
這里我們小編參考了幾篇文章特為大家整理下,用到的朋友多支持一下了。
進(jìn)行長文章分頁,編輯人員在控制分頁符的時(shí)候手工插入很麻煩,所以修改了FCK的插入分頁符的插入字符:
修改方法:
打開/editor/js/
找到fckeditorcode_gecko.js和fckeditorcode_ie.js
因?yàn)閒ck有二個(gè)js文件。fckeditorcode_gecko.js是針對(duì)非ie的。一個(gè)是針對(duì)ie的。所以我們需要更改二個(gè)js的文件。
這樣方便我們以后插入分頁時(shí),就不需要那么一大串的了。
找到:
var FCKPageBreakCommand=function(){this.Name='PageBreak';};FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();var e=FCK.EditorDocument.createElement('Div')
以及其后字符,修改為你自己的分頁符即可
fck分頁符修改
FKC默認(rèn)添加的分頁符為:<div style="page-break-after: always"><span style="display: none"> </span></div>
對(duì)文章的分頁,我是運(yùn)用String.split("分頁符")方法,將文章以分頁符為分割點(diǎn),返回一個(gè)String類型的數(shù)組,但是雙引號(hào)不能夠相互嵌套,split()方法中的參數(shù)就沒辦法設(shè)置。
如何修改默認(rèn)的分頁符:
找到j(luò)s文件:在/fckeditor/editor/js/目錄下,需要修改的有兩個(gè)js文件:fckeditorcode_ie.js(針對(duì)IE瀏覽器的配置)、fckeditorcode_gecko.js(針對(duì)非IE瀏覽器的配置)。
在js文件中找到如下代碼,并做修改:
var FCKPageBreakCommand=function() {this.Name='PageBreak';}; FCKPageBreakCommand.prototype.Execute=function() {FCKUndo.SaveUndoStep(); var e=FCK.EditorDocument.createElement('DIV'); //這里是創(chuàng)建<div>標(biāo)簽,此處不用修改 e.style.pageBreakAfter='always'; //這里是為<div>添加樣式,把它刪掉; e.innerHTML='<span style="DISPLAY:none"> </span>'; //這里是在<div>中添加的內(nèi)容,修改一下; 我的是修改為e.innerHTML='[jb51page]'; 也就是僅有一個(gè)空格;
保存,重新添加文章,添加文章時(shí)看不出變化,保存看查看數(shù)據(jù),分頁符的位置變?yōu)? <div>[jb51page]</div>
為文章分頁就可以用split("<div>[jb51page]</div>")方法進(jìn)行拆分顯示了;
以下是參考了dedecms的方法:
大家在修改的時(shí)候一定要看清原來的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();如果不帶出現(xiàn)了編輯器無法顯示的情況。大家根據(jù)需要修改。
后面發(fā)現(xiàn)了dedecms增加的小功能,里面的函數(shù)不錯(cuò)可以參考下
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前臺(tái)代碼高亮無法自動(dòng)換行解決方法
本文標(biāo)題:fckeditor編輯器下的自定義分頁符實(shí)現(xiàn)方法
本文地址:http://mengdiqiu.com.cn/a1/wangyebianjiqi/11804.html
您可能感興趣的文章
- 01-11針對(duì)PHP環(huán)境下Fckeditor編輯器上傳圖片配置詳細(xì)教程
- 01-11UEditor 編輯器跨域上傳解決方法
- 01-11UEditor編輯器自定義上傳圖片或文件路徑的修改方法
- 01-11免費(fèi)開源百度編輯器(UEditor)使用方法
- 01-11FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 01-11讓IE8和IE9支持eWebEditor在線編輯器的方法
- 01-11Fckeditor XML Request error:internal server error (500) 解決方法
- 01-11百度編輯器ueditor前臺(tái)代碼高亮無法自動(dòng)換行解決方法
- 01-11ie9后瀏覽器fckeditor無法上傳圖片、彈出浮層內(nèi)容不顯示的解決方
- 01-11ueditor1.2.1修改超鏈接默認(rèn)值,ueditor編輯器新窗口打開連接


閱讀排行
本欄相關(guān)
- 01-11針對(duì)PHP環(huán)境下Fckeditor編輯器上傳圖片
- 01-11關(guān)于jsp版ueditor1.2.5的部分問題解決(上
- 01-11UEditor編輯器自定義上傳圖片或文件路
- 01-11UEditor 編輯器跨域上傳解決方法
- 01-11免費(fèi)開源百度編輯器(UEditor)使用方法
- 01-11ckeditor插件開發(fā)簡單實(shí)例
- 01-11使用ZeroClipboard解決跨瀏覽器復(fù)制到剪
- 01-11CKEditor 取消轉(zhuǎn)義的兩種方法
- 01-11FCKeditor + SyntaxHighlighter 讓代碼高亮著
- 01-11為SyntaxHighlighter添加新語言的方法
隨機(jī)閱讀
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 04-02jquery與jsp,用jquery
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10delphi制作wav文件的方法