【问题标题】:How to increase the font size of the ckeditor?如何增加ckeditor的字体大小?
【发布时间】:2013-05-06 09:45:57
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript html ckeditor rich-text-editor


    【解决方案1】:

    你可以使用 setStyles 函数:

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

    【讨论】:

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

      【讨论】:

        【解决方案3】:

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

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

        以及设置:

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

        查看文档:

        【讨论】:

        • 在 ckeditor 4.4.5 中,contents.css 中设置的字体大小似乎被忽略了。
        【解决方案4】:

        打开 /ckeditor/ 目录下的 contents.css 你可以改变字体大小:

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

        【讨论】:

        【解决方案5】:

        只需将此添加到您的页面

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

        【讨论】:

          【解决方案6】:

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

          【讨论】:

          • 也许你可以发布一个代码示例和更多细节来帮助 OP 更多一点?
          猜你喜欢
          • 2013-04-03
          • 2017-10-07
          • 2014-09-22
          • 2012-11-07
          • 2015-12-05
          • 2012-08-11
          • 2015-04-28
          • 2018-07-16
          • 2015-02-01
          相关资源
          最近更新 更多