如何在CKEditor中设置默认字体大小

Question

我在设置CKEditor实例的默认字体大小时遇到了问题。我尝试过搜索，但没有找到能回答我的问题的内容。

我有一个页面，用于输入网站信息。有3个编辑器实例，我需要将第一个实例的默认字体大小设置为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;
}

有人能够解决这个问题吗？非常感谢任何帮助！

提前感谢大家。

mhond

- Ecxzqute

Answer 1

我希望以上的答案能够帮助到一些人。但它们并没有帮助到我，原因如下：使用Firebug，我发现about:blank页面有一个默认的p标签字体设置，这覆盖了我在contents.css文件中的设置。为了解决这个问题，我在body标签中加入了p标签，并在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;
}

非常好用！希望这能帮到你。

- EWPDesign

---

以上对我来说完美地运作了。我使用了font-size: 1em !important，但原理是相同的。 - Stephen

它帮了我！原始的contents.css中缺少p标签真的很烦人。 - low_rents

Answer 2

在页面示例中，应用CKEditor文本区域中的样式：

- muhammad ali

Answer 3

假设您想将Verdana设置为默认字体。以下是您可以执行的操作：

1. 打开contents.css并更改字体：

   font-family: Verdana;

2. 在应用程序/页面中添加此样式，其中将发布输出：

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

就这样！现在您已成功更改了默认字体。

- Pachelbel

Answer 4

希望这能有所帮助。以下是我注意到的几个问题。

首先，我需要不断刷新才能看到新的更改。我编辑了位于/ckeditor/目录下的contents.css文件，您可以更改其中的内容：

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

我还注意到您可以编辑/ckeditor/skins/kama/editor.css目录中的名为editor.css的文件。您可以将“kama”更改为您正在使用的任何皮肤。现在，您可以编辑.cke_contents部分。

似乎contents.css也会覆盖您在editor.css中所做的任何更改。希望这能帮助大家。

确保刷新或清除缓存以查看是否进行了任何更改。

- busytraining

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'
        }
    }
 ]);

- Bouchaala Sabri

---

谢谢您的回复先生！我的想法是为CK实例中的标题字段设置一个默认字体大小，比如font-size：30px，当用户键入到该字段时，文本将自动具有30px的大小。有没有一种方法来配置CK以实现这个功能？ - Ecxzqute

Answer 6

在这里设置CKEditor的默认字体大小：

skins/editor.css

.cke_reset_all,.cke_reset_all *{font:12px}

.cke_reset_all,.cke_reset_all *{字体:12像素}

- user3472011

Answer 7

当检查编辑器中输入的元素时，我发现实际上是contents.css文件对字体样式产生了影响。

因此，请进入ckeditor目录中的contents.css文件，并进行以下更改：

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

- wang502