如何增加ckeditor的字体大小？

Question

我想增加富文本编辑器“ckeditor”的字体大小。

我正在使用的此页面的第一个演示 ( http://ckeditor.com/demo#toolbar )。 我想让正文的字体大小说 44px。

我找到了这个链接http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups 。 看来我可以从这个页面配置我的字体大小。 但仍然无法指出哪种配置适合增加字体大小。

Answer 1

您可以使用 setStyles 函数：

CKEDITOR.replace('editor1', {
        on: {
          instanceReady: function (evt) {
              evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '72px'})
          }
        }
    }

Answer 2

添加一个contents.css来修改编辑器中显示的内容默认字体和大小：

body {
   font-family: Arial;
   font-size: 44px;
}

并设置：

config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '44px';
config.contentsCss

请参阅文档：

• http://docs.ckeditor.com/#!/guide/dev_styles
• http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Answer 3

• 如果要修改编辑器中显示的内容，请自定义contents.css 。
• 如果您想向样式组合添加一些新的、预定义的样式，请参阅官方style.js 指南。
• 如果您开发的插件添加了一些需要样式的功能，请使用CKEDITOR.addCss()方法。
• 如果要解析现有 CSS 文件并将规则用作预定义样式，请参阅stylesheetparser 插件。

Answer 4

打开 /ckeditor/ 目录中的 contents.css 并且您可以更改字体大小：

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

Answer 5

只需将此添加到您的页面

CKEDITOR.replace('editor1', {
          on: {
              instanceReady: function (evt) {
                  evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '18px', 'font-family': 'Verdana'})
              }
          }
      });

Answer 6

我正在使用 ckeditor 4.4.6 并更改 content.css 作品，请注意更改“body”类不起作用，需要更改“.cke_editable”类。