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

How to set default font-size on CKEditor

提问by Ecxzqute

I am having a problem setting a default font-size for a CKEditor Instance. I have tried googling but found nothing that answers my question.

我在为 CKEditor 实例设置默认字体大小时遇到​​问题。我试过谷歌搜索，但没有找到可以回答我的问题的内容。

I have a page which takes an input for a website. There are 3 Editor instances and I have to make the default font-size of the first instance to, say about 20 to 30px.

我有一个页面，它接受一个网站的输入。有 3 个 Editor 实例，我必须将第一个实例的默认字体大小设为 20 到 30px。

I have tried modifying contents.css found inside CKEDITOR folder and changing the font-size there but it affects all the 3 editor instances

我尝试修改 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;
}

Anybody have been able to figure out how to solve this? Any help is very much appreciated!..

任何人都能够弄清楚如何解决这个问题？很感谢任何形式的帮助！..

Thank you in advance guys..

提前谢谢你们。。

mhond

蒙蒙

回答by EWPDesign

I hope the answers above help some people. They did not help me and here's why. Using firebug, I could see that about:blank had a default font for the p tag which overrode my setting in the contents.css file as mention above. Here's what I did to fix it. I added a p to the body tag and added !important to the font-family and font-size lines:

我希望上面的答案可以帮助一些人。他们没有帮助我，这就是原因。使用 firebug，我可以看到 about:blank 的 p 标签有一个默认字体，它覆盖了我在上面提到的 contents.css 文件中的设置。这是我为修复它所做的。我在 body 标签中添加了 ap 并将 !important 添加到 font-family 和 font-size 行中：

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;
}

Worked great! I hope this helps.

工作得很好！我希望这有帮助。

回答by Bouchaala Sabri

You can use the javascript API to add some style to a CKEditor instance

您可以使用 javascript API 向 CKEditor 实例添加一些样式

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

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

回答by Pachelbel

Let us say you want to use Verdana as the default font. Here is what you can do:

假设您想使用 Verdana 作为默认字体。您可以执行以下操作：

1. Open contents.css and change the font:

   font-family: Verdana;

2. In the application/page where the output will be published, add this style:

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

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

   font-family: Verdana;

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

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

That's it! Now you have changed the default font successfully.

而已！现在您已成功更改默认字体。

回答by muhammad ali

Applying styles in text-area of CKEditor in page example :

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

CKEDITOR.replace('textarea', {contentsCss: ".cke_editable{font-size: 18px; font-family:muna;}" , font_defaultLabel : 'Muna' , fontSize_defaultLabel : '18px'});

回答by busycoding

I hope this helps. Here are a few things I have noticed.

我希望这有帮助。以下是我注意到的一些事情。

First, I really need to keep on refreshing to see the new changes appear. I edited the .css file named contents.css inside the /ckeditor/ directory, you can change these:

首先，我真的需要不断刷新才能看到新的变化出现。我在 /ckeditor/ 目录中编辑了名为 contents.css 的 .css 文件，您可以更改这些：

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

I also noticed you can edit the file named editor.css inside the /ckeditor/skins/kama/editor.css directory. You can change 'kama' to whatever skin you are using. Now you can edit the .cke_contents parts.

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

Seems also like contents.css will overwrite what you have done in editor.css. Hope this helps guys.

似乎contents.css 也会覆盖你在editor.css 中所做的。希望这对伙计们有所帮助。

Make sure you refresh or clear cache to see if any changes are being made.

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

回答by user3472011

Here to setting default font-size for CKEditor:

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

skins/editor.css

皮肤/editor.css

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

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

回答by wang502

When inspect the element I typed in the editor, I found it is contents.css file that actually has effects on the font style.

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

So go the the contents.css file inside the ckeditor directory, make this change:

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

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