2009-09-09 128 views
18

我想在CKEditor字體組合框中添加一個字體。這本身就很容易。不過,我想添加的字體是我使用@ font-face CSS3屬性的自定義字體。 我設法做到了,但編輯器本身不顯示自定義字體。如果我只是採用CKEditor創建的html並將其顯示在頁面上的div上,則自定義字體將很好地顯示出來。 我也想以某種方式將@ font-face屬性添加到CKEditor的文本區域,這樣我的用戶可以在他們輸入時看到自定義字體。將@ font-face添加到CKEditor

這可能嗎?

回答

36

添加以下行至CKEDITOR/config.js

config.contentsCss = 'fonts.css'; 
//the next line add the new font to the combobox in CKEditor 
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names; 

其中fonts.css有@字體面屬性:

@font-face { 
    font-family: "yourfontname"; 
    src: url(../fonts/font.eot); /* IE */ 
    src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/ 
} 
+7

的說明給任何人使用 「編輯框」 :content.css包含了編輯區域的一些非常有用的默認樣式,因此您可能寧願保留它: 'config.contentsCss = [CKEDITOR.getUrl('contents.css'),'/ path/to/fonts .css'];' – 2014-01-03 13:45:03