[CKEditor]從Word貼上CKEditor發生文字排版跑掉的問題

CKEditor 是一個強大的所見即所得 HTML 編輯器 (WYSIWYG HTML Editor)

在調整好工具列後將Word的內容貼到CKEditor上居然文字排面跑掉了！

WORD：



CKEditor：



折騰了一番才發現少加了CreateDiv這一個功能

添加CreateDiv的CKEditor：


其config.js範例語法如下：


接著我們來比較一下有加跟沒有CreateDiv的Source

左邊沒加CreateDiv　右邊有加CreateDiv左邊是超大型巨人 右邊是鎧之巨人



我們可以看到上圖右邊div tag多了 style="clear:both" 這一個語法

這是用來清除浮動元素，這樣一來排版才會正常顯示

實際效果可以到W3Schools測試

CSS clear property
http://www.w3schools.com/cssref/pr_class_clear.asp

但很奇怪的地方是table用的是align，卻支持float的效果

或許是瀏覽器自動默認為float的關係吧

這疑點就暫時先擱置著吧

看來日後與前端的接觸是無法避免了

參考文章：
CSS clear property
http://www.w3schools.com/cssref/pr_class_clear.asp

HTML table tag
http://www.w3schools.com/tags/tag_table.asp

HTML table align Attribute
http://www.w3schools.com/tags/att_table_align.asp

顏文字卡 | 豐富的顏文字庫
http://facemood.grtimed.com/