使用ckeditor 4.x 时遇到的问题及解决办法

1、默认配置下ckeditor切换到源代码模式时，代码会按ckeditor默认的设置进行格式化，可以用下面的方法来按你的要求进行格式化：

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

参数说明：

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

解决方案参考：http://blog.csdn.net/cui55/article/details/6101197

 

以上问题是我在插入FLASH播放器代码时，遇到的。object、embed、param在没有做以上设置时，这三个元素的代码都会被格式化成一堆，没有任何缩进，经过以上处理后这三个元素恢复正常。

 

2、当插入embed代码时，ckeditor会对元素的属性进行一些调整，这时会造成一些属性丢失，解决办法如下：

config.protectedSource.push(/<\s*embed[\s\S]*?>/gi);

要求ckeditor对embed元素按原样输出，不做调整

方案参考：http://www.cnblogs.com/ndxsdhy/archive/2011/05/24/2055858.html

3、当在ckeditor里插入&符号时，切换到源代码会被转换成&造成一些需要使用&符号的代码出错，解决办法如下：

 

config.forceSimpleAmpersand = true; //解决&等符号 被自动转义为&默认值是false

 

其他参考：http://mitnk.com/54/using_ckeditor_to_format_html_code/