Question

我正在使用Kentico 9，我希望能够在不同的页面上使用不同的CK编辑器样式集。我已将样式集添加到styles.js文件中，如下所示。

CKEDITOR.stylesSet.add("mystyles", [{ name: "testone", element: "p" }]);

然后在页面中我根据CK Editor网站添加了一些JS。

if (CKEDITOR.currentInstance) {
    CKEDITOR.currentInstance.config.stylesSet = "mystyles";
}

当我加载包含CK编辑器的页面时，样式下拉列表包含默认样式集，而不是我定义的自定义样式集。

有谁知道如何实现这个目标？

Answer 1

如果我没记错，您需要在 config.js （CMSAdminControls / CKEditor / config.js）下拉列表中定义新的工具栏。

类似的东西：

config.toolbar_Basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'InsertLink', 'Unlink']
];

另一件事 - 您需要在 Webparts 应用程序＆gt;中为此下拉列表添加新选项。 EditableText webpart＆gt;属性＆gt; HTMLAreaToolbar＆gt;数据源

Answer 2

这是您需要阅读的documentation。

下拉样式在CMS\CMSAdminControls\CKeditor\styles.js中定义，例如：

{ name: 'Italic Title',     element: 'h2', styles: { 'font-style': 'italic' } },

您可以定义样式的名称（名称显示在下拉列表中），然后定义应该应用的元素和样式。

编辑文件后，请确保清除浏览器缓存。由于大多数Kentico管理界面页面都是嵌套的iframe，因此缓存非常激烈，在清除缓存之前，您的样式可能不会出现。

Answer 3

嗯，毕竟它只是javascript，所以你可以在一些if语句或某些switch-case中检查url，然后应用你需要的样式。你需要一些代码示例吗？你应该可以在互联网上找到很多这些：）

Answer 4

以下是我解决问题的方法。我将以下内容添加到styles.js：

CKEDITOR.stylesSet.add("my-styles", [
    { name: "Paragraph", element: "p" },
    { name: "Heading 1", element: "h1" }
]);

然后，在我的网站区域的母版页中，需要使用＆＃34; my-styles＆＃34;样式集，我补充道：

<script>window.ckstyleset = "my-styles"</script>

最后，在config.js中我添加了：

var styleset = window.ckstyleset ? window.ckstyleset : "default";

config.stylesSet = styleset;

使用这种方法，我可以自定义下拉列表中列出的样式，具体取决于使用的母版页。