Question

在CKEditor中，我需要能够将类.h1，.h2，.h3 ...添加到我的标题中，以便将它们渲染为不同的大小。

示例：

<h1 class="h3">h1 shown at same size as h3</h1>

我可以将以下内容添加到我的stylesSet中，这看起来非常详细：

  config.stylesSet = [

    // Headers as h1
    { name: 'h2 as h1', element : 'h2', attributes: {'class': 'h1'} },
    { name: 'h3 as h1', element : 'h3', attributes: {'class': 'h1'} },
    { name: 'h4 as h1', element : 'h4', attributes: {'class': 'h1'} },
    { name: 'h5 as h1', element : 'h5', attributes: {'class': 'h1'} },
    { name: 'h6 as h1', element : 'h6', attributes: {'class': 'h1'} },

    // Headers as h2
    { name: 'h1 as h2', element : 'h1', attributes: {'class': 'h2'} },
    { name: 'h3 as h2', element : 'h3', attributes: {'class': 'h2'} },
    { name: 'h4 as h2', element : 'h4', attributes: {'class': 'h2'} },
    { name: 'h5 as h2', element : 'h5', attributes: {'class': 'h2'} },
    { name: 'h6 as h2', element : 'h6', attributes: {'class': 'h2'} },

    // Headers as h3
    { name: 'h1 as h3', element : 'h1', attributes: {'class': 'h3'} },
    { name: 'h2 as h3', element : 'h2', attributes: {'class': 'h3'} },
    { name: 'h4 as h3', element : 'h4', attributes: {'class': 'h3'} },
    { name: 'h5 as h3', element : 'h5', attributes: {'class': 'h3'} },
    { name: 'h6 as h3', element : 'h6', attributes: {'class': 'h3'} },

    // Headers as h4
    { name: 'h1 as h4', element : 'h1', attributes: {'class': 'h4'} },
    { name: 'h2 as h4', element : 'h2', attributes: {'class': 'h4'} },
    { name: 'h3 as h4', element : 'h3', attributes: {'class': 'h4'} },
    { name: 'h5 as h4', element : 'h5', attributes: {'class': 'h4'} },
    { name: 'h6 as h4', element : 'h6', attributes: {'class': 'h4'} },

    // Headers as h5
    { name: 'h1 as h5', element : 'h1', attributes: {'class': 'h5'} },
    { name: 'h2 as h5', element : 'h2', attributes: {'class': 'h5'} },
    { name: 'h3 as h5', element : 'h3', attributes: {'class': 'h5'} },
    { name: 'h4 as h5', element : 'h4', attributes: {'class': 'h5'} },
    { name: 'h6 as h5', element : 'h6', attributes: {'class': 'h5'} },

    // Headers as h6
    { name: 'h1 as h6', element : 'h1', attributes: {'class': 'h6'} },
    { name: 'h2 as h6', element : 'h2', attributes: {'class': 'h6'} },
    { name: 'h3 as h6', element : 'h3', attributes: {'class': 'h6'} },
    { name: 'h4 as h6', element : 'h4', attributes: {'class': 'h6'} },
    { name: 'h5 as h6', element : 'h5', attributes: {'class': 'h6'} }
];

在其他StackOverflow questions我找到了像这样添加它们的答案，但它不起作用。

   config.stylesSet = [
      { name: 'as h1', element : ['h2', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h1'} },
      { name: 'as h2', element : ['h1', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h2'} },
      { name: 'as h3', element : ['h1', 'h2', 'h4', 'h5', 'h6'], attributes: {'class': 'h3'} },
      { name: 'as h4', element : ['h1', 'h2', 'h3', 'h5', 'h6'], attributes: {'class': 'h4'} },
      { name: 'as h5', element : ['h1', 'h2', 'h3', 'h4', 'h6'], attributes: {'class': 'h5'} },
      { name: 'as h6', element : ['h1', 'h2', 'h3', 'h4', 'h5'], attributes: {'class': 'h6'} }
   ];

在the docs中，此方法没有任何内容。

我错过了什么，有其他方法还是第一种方法？

Answer 1

指定多元素不起作用。您只能为一个样式条目指定一个元素。这是因为CKEditor需要在下拉列表中显示预览这样的样式元素的外观。

通过在单个样式条目中允许多个元素，CKEditor将需要显示所有元素的预览（与当前解决方案相同）或仅预览一个元素，这可以帮助您获得更小的代码和更少的条目数在样式下拉列表中但从WYSIWYG的角度来看并不是非常实用（预览与应用样式后的内容不匹配）。

CKEditor类到多个块元素

1 个答案: