[JS] CKEditor 解決 空格換行問題

by Mesak

ckeditor 編輯的時候 會讓  p 換行

<p>
abcd<p>

參考了一下 文件,必須要設定 html 撰寫風格規則才行….
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting

以下是加入 到 config.js 的文件

CKEDITOR.on( 'instanceReady', function( ev ){

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

另外 設定 換行標籤模式

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

這樣 enter 之後 會變 BR ,SHIFT + ENTER 就會變成 P 這個標籤了

You may also like