更改Ckeditor的textarea的默认字体大小

问题描述 投票:0回答:2

所以似乎有很多问题,但不确定最新的Ckeditor版本4是否有任何解决方案。我只是想改变Times New Roman的默认字体,我可以访问editor.css文件我正在使用的皮肤。

我尝试过没有成功的一些建议是将它添加到editor.css文件中:

body, p {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: rgb(41, 41, 42);
    font-size: 13px;
    color: rgb(103, 106, 108);
    overflow-x: hidden;
}

我也尝试将其添加到CKeditor的config.js文件中:

config.contentsCss = ["body {font-size: 20px;}"]

CKEDITOR.editorConfig = function( config ) { }区块内,以及在其下方添加:

CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '28px';

仍然没有运气。不太清楚为什么这么难。有什么建议?

我甚至在editor.css中添加了“catch all”,但仍然不起作用:

* {
 font-size: 14px;
 font-family: Arial;
}

这会影响网站上的所有内容,除了短信的文本框中的内容。现在请注意,fullPage选项已启用,导致textarea位于iframe中,但不确定这是否会产生影响。

我已尝试过其他stackoverflow问题的解决方案,但它们仍然不会在文本编辑器中更改字体大小,只是其他所有内容。

**编辑**

所以这就是我的texteditor的样子:

enter image description here

这是默认情况下每个texteditor的样子,因此显然更改contents.css文件不会影响它。我想我需要弄清楚为什么在HTML文档的contents.css标签中没有引用head文件。

javascript ckeditor
2个回答
0
投票

contentsCss指向CSS文件,该文件用于为经典编辑器设置样式编辑器内容区域(内联编辑器是页面的一部分,因此您需要在该页面中添加适当的样式以用于样式编辑器内容)。默认情况下,此文件位于ckeditor/contents.css中。请简单地打开该文件,找到body元素的定义,将font-family更改为您要使用的值。接下来找到.cke_editable的定义(此类被分配给body元素)并将font-size更改为您要使用的值。以下是示例配置和结果。

body
{
    /* Font */
    font-family: "Comic Sans MS";
    font-size: 12px;

    /* Text color */
    color: #333;

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

    margin: 20px;
}

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

    /* Fix for missing scrollbars with RTL texts. (#10488) */
    word-wrap: break-word;
}

enter image description here

可能令人困惑的是,下拉列表不会对外部CSS文件的样式做出反应。它们仅对分配给HTML元素的内联样式作出反应,并且仅在存在完全匹配时才会响应(它们不是完全上下文敏感的)。但是,您可以验证浏览器开发工具使用的默认字体。


0
投票

看似永远和一天之后,我只是将其添加到我的自定义config.js文件中:

CKEDITOR.addCss("body {font-size: 10px}");

这解决了我的问题。

© www.soinside.com 2019 - 2024. All rights reserved.