[編輯器] CKeditor 更換 background-color and font-size

logo 相信大家在製作 Web 過程,一定會用到編輯器,然而 CKeditor 前身 FCKeditor 非常有名,FCKeditor 運行了六年之久,在去年2009年的時候,轉換成了 CKeditor,目前開發團隊也專注於此版本,現在已經推出到 CKEditor 3.2 released!,可以參考 CKEditor 3.x – Developer’s Guide,裡面也整合了 jQuery,替很多開發者想到更多管道去整合網站,然而今天設計網站,需要改變編輯器的背景顏色,預設是白色背景,但是並非所有網站都是白色呈現,所以才需要動到背景顏色,這樣好讓使用者可以融入整個背景,在 Plurk 發表了這問題,也找了官方論壇,都沒有發現正確解答,官方論壇有篇類似問題:Change the background color of the CKEditor text area,這篇自己試過是沒有用的,正確解法可以參考 CKeditor 的 API:contentsCss。 1. 首先在 CKeditor 根目錄建立新檔案:mysitestyles.css
body
{
  /* Font */
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;

  /* Text color */
  color: #f0f0f0;

  /* Remove the background color to make it transparent */
  background-color: #353c42;
}

html
{
  /* #3658: [IE6] Editor document has horizontal scrollbar on long lines
  To prevent this misbehavior, we show the scrollbar always */
  _overflow-y: scroll
}

img:-moz-broken
{
  -moz-force-broken-image-icon : 1;
  width : 24px;
  height : 24px;
}
img, input, textarea
{
  cursor: default;
}
2. 設定 config.js 檔案(Ckeditor 目錄裡面)
CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	config.uiColor = '#AADC6E';
	config.contentsCss = '/path/ckeditor/mysitestyles.css';
};
重點在於 config.contentsCss = ‘/path/ckeditor/mysitestyles.css’; 這行,在 Path 部份,請注意由根目錄開始寫起喔。 另外解法,就是用 jQuery Adapter,header 加入:

使用 Ckeditor 方式如下: html:
javascript
$('#test').ckeditor({ contentCss: '/path/ckeditor/mysitestyles.css' });
就提供這兩種解法給大家參考。
  • Joanne

    我用drupal 6+ckeditor 6.x 1.1 version,ckeditor主動用了theme的背景的關系,但是因為theme的背景是圖像,而內容卻是放在一個白色底table內。因此在editor改內容的時候,ckeditor只取了背景的圖像做editor的背景,所以文字便看得好辛苦,因為所用的文字也是深色的。我嘗試用你的方法改,好像沒有改善,無分別,就連文字大小也沒改過。請問有什麼方法可做?謝謝。 theme reference website: http://www.telewide.com