Kentico CKEditor 动态配置样式集

Question

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

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

然后在页面中我根据 CK 编辑器网站添加了一些 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 application > EditableText webpart> Properties > HTMLAreaToolbar > DataSource 中向此下拉列表添加新选项

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" }
]);

然后，在我网站需要使用 "my-styles" 样式集的区域的母版页中，我添加了：

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

最后，在 config.js 我补充说：

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

config.stylesSet = styleset;

使用这种方法，我能够根据使用的母版页自定义下拉列表中列出的样式。

Kentico CKEditor Configure Style Set Dynamically