时间戳

首页 > 解决方案 > 当 config.fullPage=true 时，CKEDITOR 无法从外部样式表（在 config.contentscss 中配置）应用样式

css - 当 config.fullPage=true 时，CKEDITOR 无法从外部样式表（在 config.contentscss 中配置）应用样式

问题描述

为了在 CKEditor 中使用来自外部样式表的样式定义自定义样式集，配置了以下设置：

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/externalStyleSheet.css';
config.stylesSet = [ { name : window.parent.getResource('editor.style.normal'), element : 'span', attributes: { 'class': 'formatnormal' } }, { name : window.parent.getResource('editor.style.small'), element : 'span', attributes: { 'class': 'formatsmall' } }, { name : window.parent.getResource('editor.style.large'), element : 'span', attributes: { 'class': 'formatlarge' } }, { name : window.parent.getResource('editor.style.bold'), element : 'span', attributes: { 'class': 'formatbold' } }, { name : window.parent.getResource('editor.style.smallBold'), element : 'span', attributes: { 'class': 'formatsmallbold' } }, { name : window.parent.getResource('editor.style.largeBold'), element : 'span', attributes: { 'class': 'formatlargebold' } }, { name : window.parent.getResource('editor.style.red'), element : 'span', attributes: { 'class': 'formatred' } }, { name : window.parent.getResource('editor.style.code'), element : 'span', attributes: { 'class': 'formatcode' } }, ];
config.fullPage = true;
config.resize_enabled = false;
config.removePlugins = 'resize,autogrow,elementspath';

预期结果 样式集应显示自定义样式列表。选择文本并从下拉列表中选择样式后，应应用该样式。

实际结果 样式集显示自定义样式列表，其中样式应用于标签本身。但是，当在编辑器中选择文本（在 iframe 中）并从下拉列表中选择样式时，样式将应用于“span”标签，但相应的 CSS 不存在于 iframe 的上下文中.

其他细节 当config.fullPage = false时，没有问题，可能是因为编辑器不在不同的 iframe 中并且 CSS 可用。问题在于config.fullPage = true，在我们的例子中需要它才能有一个垂直滚动条。

浏览器：Chrome 版本 66.0.3359.181

操作系统：Windows 10

CKEditor 版本：4.9.2

已安装的 CKEditor 插件：无，除了上面提到的配置。

标签： cssiframeckeditorckeditor4.x

解决方案

这是记录在案的行为：

内容CSS：字符串| Array 用于将样式应用于编辑器内容的 CSS 文件。它应该反映要显示内容的目标页面中使用的 CSS。

注意：此配置值被内联编辑器忽略，因为它使用直接来自 CKEditor 呈现的页面的样式。在开发人员可以完全控制页面 HTML 代码的全页面模式下，它也会被忽略。

阅读文档中的更多内容并查看 SDK 示例。

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

您可以使用 ckeditor 在网页中加载 css，类似于https://jsfiddle.net/z23qxw1y/

CKEDITOR.stylesSet.add('my_styles', [
    // Block-level styles.
    {
      name: 'Blue Title',
      element: 'h2',
      styles: {
        color: 'Blue'
      }
    },
  ]); 
 CKEDITOR.config.stylesSet = 'my_styles';

推荐阅读