Question

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

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中）并从下拉列表中选择样式时，样式将应用于＆＃34; span＆＃34;标签，但相应的CSS不存在于iframe的上下文中。

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

浏览器：Chrome版本66.0.3359.181

操作系统：Windows 10

CKEditor版本：4.9.2

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

Answer 1

这是记录在案的行为：

contentsCss：String |排列   用于将样式应用于编辑器内容的CSS文件。它应该反映在要显示内容的目标页面中使用的CSS。

注意：内联编辑器会忽略此配置值，因为它使用直接来自呈现CKEditor的页面的样式＆gt;。在完整页面模式下，它也会被忽略，开发人员可以完全控制页面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';

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

1 个答案: