更改Ckeditor文本区域的默认字体大小

时间:2018-09-05 22:37:00

标签: javascript ckeditor

因此,对此似乎有很多问题,但不确定最新的Ckeditor版本4是否有任何解决方案。我只是想将Times New Roman的默认字体更改为“ {我正在使用的{1}}皮肤文件。

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

editor.css

我还尝试将其添加到CKeditor的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; } 文件中:

config.js

config.contentsCss = ["body {font-size: 20px;}"] 块中,并将其添加到其下面:

CKEDITOR.editorConfig = function( config ) { }

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

我什至在CKEDITOR.config.font_defaultLabel = 'Arial'; CKEDITOR.config.fontSize_defaultLabel = '28px'; 中添加了“全部捕获”功能,但这仍然行不通:

editor.css

对于文本编辑器的文本框中的内容,这实际上会影响网站上的所有除外。现在,请注意,您启用了* { font-size: 14px; font-family: Arial; } 选项,导致文本区域位于fullPage中,但不确定是否会有所作为。

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

**编辑**

这就是我的短信编辑器的样子:

enter image description here

这是每个文本编辑器默认情况下的外观,因此显然更改iframe文件不会对其产生影响。我想我需要弄清楚为什么在HTML文档的contents.css标签中没有引用contents.css文件。

2 个答案:

答案 0 :(得分: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元素的内联样式做出反应,并且仅在存在完全匹配项时(它们并不完全与上下文相关)。但是,您可以验证浏览器开发工具正在使用的默认字体。

答案 1 :(得分:0)

一天又一天之后,我只是将其添加到自定义config.js文件中:

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

这解决了我的问题。