使用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里插入&符号时,切换到源代码会被转换成&amp;造成一些需要使用&符号的代码出错,解决办法如下:

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

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

原文地址:https://www.cnblogs.com/xmily/p/3130450.html