[精讚] [會員登入]
2267

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小

CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

此文完整連結 http://n.sfs.tw/10311

複製連結 [CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-23 16:46:07 最後編修
2016-11-27 21:30:06 By 張○○
 

自動目錄

CKeditor4 中可以改變區塊樣式、段落格式、字型名稱及字型大小,以下是我的設定,把常會用的挑出來..

修改 path/to/ckeditor/config.js

區塊樣式

ckeditor4可以定義class和style,所以在設定上相當的彈性,因為我用bootstrap的css,所以把他的label和alert都定義下去;同時,自定了一些會用的到樣式,這些樣式都可以自己定義,最後ckeditor4 會把他自動分類為「區塊樣式」「內嵌樣式」兩種,這就由不得你。

config.stylesSet = [
 { name: 'h3_blue', element: 'h3', styles: { 'color': '#376D9B' } },
 { name: 'h4_green', element: 'h4', styles: { 'color': '#379D9D' } },
 { name: '黑反白div' , element: 'div', attributes: { 'class': 'div_upsidedownblack' } },
 { name: 'code黑反白' , element: 'code', attributes: { 'class': 'code_upsidedownblack' } },
 { name: 'alert-warning', element: 'div', attributes: { 'class': 'alert alert-warning' } },
 { name: 'alert-success', element: 'div', attributes: { 'class': 'alert alert-success' } },
 { name: 'alert-info', element: 'div', attributes: { 'class': 'alert alert-info' } },
 { name: 'alert-danger', element: 'div', attributes: { 'class': 'alert alert-danger' } },
 { name: '按鍵', element: 'kbd', attributes: { 'class': 'likeabutton' } },
 { name: 'label-default', element: 'span', attributes: { 'class': 'label label-default' } },
 { name: 'label-primary', element: 'span', attributes: { 'class': 'label label-primary' } },
 { name: 'label-success', element: 'span', attributes: { 'class': 'label label-success' } },
 { name: 'label-info', element: 'span', attributes: { 'class': 'label label-info' } },
 { name: 'label-warning', element: 'span', attributes: { 'class': 'label label-warning' } },
 { name: 'label-danger', element: 'span', attributes: { 'class': 'label label-danger' } },
//    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow', 'padding':'3px' } },
];

段落格式

我把常用的挑出來,h6,h7理論上是可以不要了,除非你有做什麼特殊的樣式,這裡的標籤不能亂定義,一定要屬於區塊類型(Block-level Elements)[1] 的才可以

config.format_tags = 'p;h1;h2;h3;pre;div;h4;h5'

字型名稱和字型大小

字型名稱不能亂設定,只能設定大家一定都有的字型

字型大小我採用相對而不用絕對,這是為了適應調適化網頁的關係

config.fontSize_sizes = 'x0.8/0.8em;x0.9/0.9em;x1/1em;x1.2/1.2em;x1.4/1.4em;x1.6/1.6em;x1.8/1.8em;x2/2em;x2.58/2.5em;x3/3em;x4/4em;';
config.font_names = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體
';

設定編輯器載入的CSS

最後也是最重要的,上面做了這麼多樣式的設定,一定要記得把他們給載入到ckeditor4中,否則你無法在編輯器中直接看到你設定的樣式,得等存檔後才能看,很不方便。

config.contentsCss = ['/web/css/bootstrap.css','/web/css/jinzan.css'];

參考資料

[1] http://www.w3schools.com/html/html_blocks.asp

你可能感興趣的文章

[jQuery] select 元件的取值及給值 html中的元件select,在jquery中要如何使用?

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

[Jquery] 複選的checkbox取值 遇到複選的checkbox該如何取值?

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

Jquery+CSS div區塊的拖拉(drag and drop)效果 網頁想要做到拖拉區塊的功能,但又不想使用他人的插件或是 jquery-ui的話,怎麼做?

[Javascript] NaN是什麼? javascript 的NaN和取得整數

[Javascript] 陣列、陣列的操作 Javascript 的陣列操作:宣告、取值、賦值、插入或移除項目,檢查KEY、檢查是否為陣列等等

[Javascript/Jquery] 移除textarea中空行、空白行。 textarea中要移除沒內容的空行、只有空白的行、只有定位字元的行

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

使用Google尋找你的手機 這近發現google竟然可以用來找android的手機,而且不需要經過什麼設定或安裝軟體。

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

海棉寶寶超泡杯演奏的sweet victory 章魚哥和海棉寶寶在超泡杯的演奏歌曲

[MAC] 安裝APACHE+PHP OS Darwin OpenIDMac1deAir 15.6.0 Darwin Kernel Version 15.6.