CKEditor 4 粗體、斜體、底線、顏色沒有效果的原因及解決方案

在CKEditor 4 編輯器中,設定粗體,回到前端秀出來的文字粗體、斜體、底線都沒有效果,
應該是在做前端網站設計,都習慣用reset.css來重新設置每個標籤的樣式
而在CKEditor 4 我們將某段文字設定為粗體,
切到原始碼來看,CKEditor預設將該用<strong></strong>包裹,用HTML標籤產生粗體效果,

<strong>HELLO WORLD!!</strong>

不過<strong>已經被reset.css重設了,所以在前端<strong>並起不了粗體作用,
在網路上找到一個方法,在CKEditor 4 的config.js設定檔中加上

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };

這時候粗體就會用<span>來包裹透過CSS來產生粗體效果,而不是<strong>標籤:

<span style=”font-weight:bold;”>HELLO WORLD!!</strong>

這樣就正常顯示了粗體了,粗體、斜體、底線方法同理:

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };
config.coreStyles_italic = { element: ‘span’, styles: { ‘font-style’ : ‘italic’ } };
config.coreStyles_underline = { element: ‘span’, styles: { ‘text-decoration’ : ‘underline’ } }

若有更好的作法再請各位大大提出囉~^^

自己的題目自己解

使用reset.css來重設所以HTML預設樣式
有reset就有unreset就是反重設HTML預設樣式
跟reset.css一樣,網路上有流傳很多版本,
可以參考一下下列網址版本。
https://github.com/binarystash/unreset-css
其優點是他有設定class,也就是說我可以指定容器的去做反重設HTML預設樣式的動作

例:
<div class=”unreset”>
     <strong>HELLO WORLD!!</strong>
</div>

這樣就OK囉~這樣即使是使用<stong>也一樣有效果

針對顏色的部份,如果你有習慣下列這方式設定整個網頁的預設樣式

body *{
color:#000;
text-decoration:none;
font-family:  “微軟正黑體”,Arial, “新細明體”;
}
可能要建議你把color這樣式拿掉,才不會影響CKEditor編輯好的文字秀在前端
顏色不會變的問題

[……]

閱讀更多