如何讓CKEditor用CSS呈現文字？

我有一個CKEditor用於編輯網頁中的文本。如何讓CKEditor用CSS呈現文字？

在網頁中，文本在其上下文中呈現，因此遵循頁面CSS格式。

我的問題是如何告訴CKEditor將CSS樣式表應用於編輯器渲染？當然沒有改變生成的源代碼？

我的代碼：

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea> 
<script type="text/javascript"> 
     window.onload = function() 
     { 
       CKEDITOR.replace('actu-content'); 
     }; 
</script>

和我的CSS：

.ActuContent{ 
    padding:10px 10px 10px 10px; 
    color:#416a8b; 
    font-size:1.6em; 
}

而且我的CKEditor Config.js文件只包含了工具欄的配置。

CKEDITOR不「.ActuContent」的設置適用於它的渲染......

來源

2009-12-11 Jalil

實際的最好這個問題的答案是：

CKEDITOR.config.contentsCss = '/mycustom.css'; 
CKEDITOR.replace('myfield');

因爲你可能想在不同的編輯器中有不同的風格。如果您更改主要content.css，如Jalil did，則無法做到這一點。

來源

2010-09-14 14:59:55 Rene

注意你也可以通過傳遞一個數組來使用多個樣式表：'CKEDITOR.config.contentsCss = ['/1.css' ，'/2.css'];' – fny 2013-09-23 14:10:50

Hello Rene，什麼是'myfield'？在你的情況下。 – kn3l 2013-12-12 09:05:12

myfield是textarea或div的編號將被替換的內容編輯器的編號 – 2014-11-26 09:13:26

CKEditor的使用DIV與普通HTML元素來表示你正在編輯的文本。只要看看這個DIV的內容，並寫出一個適當的樣式表。

當然，這隻適用於在渲染之前不修改CKEditor的輸出。

來源

2009-12-11 08:24:51

謝謝，我現在試試。 – Jalil 2009-12-11 08:43:33

我不明白如何申請像你說的。我更新我的問題，把它的一些代碼... – Jalil 2009-12-11 09:50:09

編輯我的問題，把一些代碼。你能解釋你的想法嗎？ – Jalil 2009-12-11 09:53:23

看到這個帖子：

CKEditor: Class or ID for editor body

通過nemisj發佈將設置類名編輯器上的可編輯區域的身體的解決方案。

您可以在編輯器onload函數中執行此操作。在你打電話之前調用這個.replace。

CKEDITOR.on('instanceReady', function(ev) 
    { 
     CKEDITOR.instances.e1.document.$.body.className = "foo"; 
    });

來源

2009-12-11 14:49:52 MustStayAnonymous

這在我看來是一個非常優雅的解決方案。立即嘗試。 – Jalil 2009-12-11 18:41:12

這個解決方案對我不起作用:-( 它給了我一個Javascript錯誤（Internet Explorer 6/8） – Jalil 2009-12-14 04:39:38

我發現了一個很簡單的方法來回答我的問題：

的content.css文件中CKEditor的目錄！

我只需要放入風格，我想在編輯器中被應用：

body { 
    color: #416a8b; 
    font-family: Arial; 
    font-size: 18px; 
    font-weight: 400; 
    text-align: left; 
}

這一切:-)

來源

2009-12-14 04:45:32 Jalil

如果你使用asp.net服務器端控件，你必須在代碼後面明確地解決這個問題，或者CKEditor：CKEditorControl標記像這樣ckeditor.ContentsCss =「/fckeditor/contents.css」; – 2015-01-11 06:23:51

@imanabidi謝謝，很高興知道 – Jalil 2015-01-11 09:19:56

有時，當我需要根據用戶設置對CKEditor實時設置某些樣式時，我在編輯器的正文對象上使用setStyle()和setStyles()函數。示例代碼：

var editor = CKEDITOR.instances.editor1; 
var size = ... // assign size value 
editor.document.getBody().setStyle('font-size',size);

另一個示例：

var editor = CKEDITOR.instances.editor1; 
var styles = { 
    "font-family": "Arial", 
    "color": "#333" 
}; 
editor.document.getBody().setStyles(styles);

來源

2012-08-16 14:54:57

如果更改content.css文件時可能會發現，它已經被緩存。由於CKEDITOR.timestamp僅添加到js文件中，因此在瀏覽器中刷新它並不是一項簡單的任務。我想出了以下解決方案：

// force to update all plugin files and styles 
CKEDITOR.timestamp = '25062014'; 
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;

來源

2014-06-25 06:09:21

如何讓CKEditor用CSS呈現文字？

回答

相關問題