帳號登錄
帳號:
密碼:
記住我 | 忘記密碼 | 帳號註冊
網站導覽
ARTICLE : CKEditor 編輯器 換行 空格 <p> 解決 辦法
作者 Mesak 於 2010年07月20日 18:03:31 (11381 次閱讀)

當我們使用 CKEditor (CK編輯器,原FCKEditor),輸入ENTER 符號發布文章或新聞的時候

編輯內會產生 換行 符號 \n 等 特殊字元,遇到一些 模組會將這些 符號轉換為 <br />

編輯文章時,輸入一個ENTER 換行就會看到下列的原始碼

<p>
    Hallo World!</p>

這時候修改 CK編輯器的設定檔就可以解決這個問題


打開下列目錄檔案

\class\xoopseditor\ckeditor\ckeditor\config.js

你可以看到下列的內容:

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
};

在尾端加上下列的 原始碼

CKEDITOR.on( 'instanceReady', function( ev ){
     with (ev.editor.dataProcessor.writer) {
       setRules("p",  {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("h1", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("h2", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("h3", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("h4", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("h5", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("div", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("table", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("tr", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("td", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("iframe", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("li", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("ul", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
       setRules("ol", {indent : false, breakBeforeOpen : false, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : false} );
     }
})

接著存檔,以後由CK編輯器產生的原始碼,就會不斷行的送出資料庫

indent  (是否加入空白 TAB)
breakBeforeOpen (插入起始原始碼標籤之前是否斷行)
breakAfterOpen (插入起始原始碼標籤之後是否斷行)
breakBeforeClose (插入結尾原始碼標籤之前是否斷行)
breakAfterClose (插入結尾原始碼標籤之後是否斷行)

 


接著是斷行部分,很多人不喜歡 使用 <P> 標籤作為一個段落的存在

預設的 斷行 ENTER 是 P 標籤

SHIFT+ENTER 是 <br /> 標籤

如果需要將預設的模式修改過來,只要在 editorConfig 內加入下列原始碼

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

這樣預設的換行標籤就是 <br/>

SHIFT+ENTER 就換成 <P> 標籤


可列印模式 轉寄給朋友

The XOOPS organisation ("XOOPS") is committed to protecting the privacy of users of the XOOPS.org sites.
The website used Ver.2.4.5 POWERED BY XOOPS PROJECT.