和平简朴的生活。纳言敏行,随遇而安。    RSS

Solution of Tab/Space/LF after <p> for CKEditor

CKEditor 编辑器段落标记<p>后禁止自动添加 Tab/Space/LF 标记的解决办法

使用 PhpCmsV9 升级了我们办公室的网站,V9做的挺不错的,可惜的是编辑器用的是 Ckeditor,感觉不是很方便,功能很强大,但是用它编辑处的文本会产生不少冗余的 html 代码,尤其是在段落标记后面会产生 换行、tab、还有大量的空格,不知道 CKeditor 是不是为了格式化 html 代码才这样做的,我不喜欢这样冗余的代码格式。

解决办法是修改ekeditor的设定文件:ckeditor/config.js

phpcmsv9 对 ckeditor 做了一些修改,比如修改了分页插件,还有文件上传等等,所以原内容不要修改,在 config.js 最后添加如下内容:
CKEDITOR.on( 'instanceReady', function( ev ){ with (ev.editor.dataProcessor.writer) { setRules("p", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h1", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h2", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h3", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h4", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h5", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("div", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("table", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("tr", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("td", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("iframe", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("li", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ul", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ol", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); } });

这样就可以解决<p>后面的换行,空格,tab的插入,效果如下图:

这些设定的解释是:

indent (是否加入空白 TAB)
breakBeforeOpen (插入起始代码标签之前是否断行)
breakAfterOpen (插入起始代码标签之后是否断行)
breakBeforeClose (插入结尾代码标签之前是否断行)
breakAfterClose (插入结尾代码标签之后是否断行)

这里,breakBeforeOpen和breakAfterClose不能用,如果添上会致使phpcms的分页函数无效。

还有断行的问题,很多人不喜欢用<p>标签作为一个段落的存在,而是喜欢<br />来断行,而 ckeditor 预设的键入“Enter”是<p>标签,而“Shift + Enter”是<br />标签,如果想要修改这个设定可以在
CKEDITOR.editorConfig = function( config ){}里加入

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

这样直接敲回车的标签就变成 <br /> 了,而“Shift + Enter”就换成<p>标签了。



Permlink: 阅读全文 Category: , Author: standme     

访客评论

 
---