kentico - Kentico CKEditor 动态配置样式集

Question

我正在使用 Kentico 9，我希望能够在不同的页面上使用不同的 CK Editor 样式集。我在styles.js 文件中添加了一个样式集，如下所示。

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

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

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

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

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

score 0 · Accepted Answer

这是我解决问题的方法。我在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;

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

score 0 · Accepted Answer

这是您需要阅读的文档。

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

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

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

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

score 0 · Accepted Answer

好吧，它毕竟只是 javascript，所以你可以简单地检查一些 if 语句或一些 switch-case 中的 url，然后应用你需要的样式。你需要一些代码示例吗？您应该可以在互联网上找到其中的许多 :)

score 0 · Accepted Answer

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

就像是：

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

另一件事 - 您需要在Webparts application > EditableText webpart> Properties > HTMLAreaToolbar > DataSource 的下拉列表中添加新选项

4 回答 4