如何在CKEditor上設置默認字體大小

Question

我在為CKEditor實例設置默認字體大小時遇到​​問題。 我曾嘗試使用Google谷歌搜索，但未找到任何答案。

我有一個頁面，用於輸入網站。 有3個Editor實例，我必須將第一個實例的默認字體大小設置為20至30像素左右。

我嘗試修改在CKEDITOR文件夾中找到的contents.css並更改那里的字體大小，但它會影響所有3個編輯器實例

/*
    Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
    For licensing, see LICENSE.html or http://ckeditor.com/license
    */

body
{
    /* Font */
    font-family: Georgia;
    font-size: 12px;

    /* Text color */
    color: #222;

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

ol,ul,dl
{
    /* IE7: reset rtl list margin. (#7334) */
    *margin-right:0px;
    /* preserved spaces for rtl list item bullets. (#6249)*/
    padding-right:40px;
}

有人能夠找出解決方法嗎？ 很感謝任何形式的幫助！..

預先謝謝你們..

蒙德

Answer 1

希望以上回答對某些人有所幫助。 他們沒有幫助我，這就是原因。 使用firebug，我可以看到about：blank的p標記具有默認字體，該字體覆蓋了我在contents.css文件中的設置，如上所述。 這是我所做的修復程序。 我將ap添加到body標簽，並在font-family和font-size行中添加！important：

body, p {
    /* Font */
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 12px !important;

    /* Text color */
    color: #000;

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

很棒！ 我希望這有幫助。

Answer 2

假設您要使用Verdana作為默認字體。 您可以執行以下操作：

1. 打開contents.css並更改字體：

   font-family: Verdana;

2. 在將發布輸出的應用程序/頁面中，添加以下樣式：

   <style> .entry-content {font-family: Tahoma;} </style>

而已！ 現在，您已經成功更改了默認字體。

Answer 3

我希望這有幫助。 這是我注意到的幾件事。

首先，我確實需要繼續刷新以查看新的更改。 我在/ ckeditor /目錄中編輯了名為contents.css的.css文件，您可以更改以下內容：

color: #000000;
background-color: #ffffff;
font-size:24px; /* Just added this */

我還注意到您可以在/ckeditor/skins/kama/editor.css目錄中編輯名為editor.css的文件。 您可以將“ kama”更改為所用的任何皮膚。 現在，您可以編輯.cke_contents部分。

似乎content.css也將覆蓋您在editor.css中所做的工作。 希望對大家有幫助。

確保刷新或清除緩存以查看是否進行了任何更改。

Answer 4

在頁面示例中在CKEditor的文本區域中應用樣式：

CKEDITOR.replace（'textarea'，{contentsCss：“ .cke_editable {font-size：18px; font-family：muna;}”，font_defaultLabel：'Muna'，fontSize_defaultLabel：'18px'}）;;

Answer 5

您可以使用javascript API向CKEditor實例添加一些樣式

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.stylesSet.html

// The set of styles for the Styles combo
CKEDITOR.stylesSet.add( 'default',
[
    // Block Styles
    { name : 'Blue Title'       , element : 'h3', styles : { 'color' : 'Blue' } },
    { name : 'Red Title'        , element : 'h3', styles : { 'color' : 'Red' } },

    // Inline Styles
    { name : 'Marker: Yellow'   , element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Marker: Green'    , element : 'span', styles : { 'background-color' : 'Lime' } },

    // Object Styles
    {
        name : 'Image on Left',
        element : 'img',
        attributes :
        {
            'style' : 'padding: 5px; margin-right: 5px',
            'border' : '2',
            'align' : 'left'
        }
    }
 ]);

Answer 6

在此處為CKEditor設置默認字體大小：

skins / editor.css

.cke_reset_all，.cke_reset_all * {font：12px}

Answer 7

在檢查我在編輯器中鍵入的元素時，我發現它實際上是對字體樣式有影響的contents.css文件。

因此，轉到ckeditor目錄中的contents.css文件，進行以下更改：

.cke_editable{
font-size: 17px;
line-height: 1.6;}