在CKEditor中设置字体大小和字体系列 [英] Setting font-size and font-family in CKEditor

问题描述

我正在与ckeditor合作

I am working with ckeditor

我想问一下如何在此插件中设置字体系列和字体大小， 我尝试使用

I want to ask how can we set the font-family and font-size in this plugin, I have tried using

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

但是这些命令只是更改前端(字体名称和大小)

but these commands just change the front-end (font name and size)

出路是什么?

推荐答案

最具前瞻性的方法(1)是覆盖要在单独文件中更改的CKEditor内容的默认CSS样式，并添加到您的<通过

The most future-proof method(1) is to override the default CSS styles for CKEditor content that you want to change in a separate file, added to your editor configuration through the config.contentsCss option.

在CKEditor SDK中查看此方案的工作示例: http://sdk.ckeditor. com/samples/classic.html

See the working sample for this scenario in the CKEditor SDK: http://sdk.ckeditor.com/samples/classic.html

在那里向下滚动到具有自定义样式的经典编辑器"示例；您可以在示例页面的获取示例源代码"部分中下载此解决方案的确切源代码.在这种情况下，自定义字体和其他样式是在单独的classic.css文件中定义的，然后使用以下命令将其提供给编辑器实例配置:

Scroll down to the "Classic Editor with Custom Styles" sample there; you can download the exact source code of this solution in the "Get Sample Source Code" section on the sample page. In this case the custom font and other styles were defined in a separate classic.css file which is then provided to the editor instance configuration with:

<script>
    CKEDITOR.replace( 'myeditor', {
        /* Default CKEditor styles are included as well to avoid copying default styles. */
        contentsCss: [ 'contents.css', 'classic.css' ]
    } );
</script>

请记住，它仅对经典编辑器有效，作为与页面样式相同，因此所有内容样式都直接来自页面样式表.

Do remember that it is only valid for classic editor as in inline editor content styles are the same as the page styles, so all content styling comes directly from the page stylesheets.

(1)这种方法比修改默认的contents.css文件更好，因为当您

(1) This method is better than modifying the default contents.css file because you don't risk overwriting your changes when you upgrade CKEditor.

这篇关于在CKEditor中设置字体大小和字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！