肯蒂科 10 |自定义组件中富文本编辑器的工具栏

Posted 2023-03-27

【中文标题】肯蒂科 10 |自定义组件中富文本编辑器的工具栏

【英文标题】：Kentico 10 | Toolbar for Rich Text Editor in a Custom Component

【发布时间】：2020-01-15 15:31:17

【问题描述】：

我可以在 Kentico 10 中为 EditableText Web 部件创建自定义工具栏，因为有很多关于如何创建/设置自定义工具栏的文档......但我只能找到 EditableTextWebPart 的文档。

我需要为某些属性/字段创建独特的工具栏，以便在多个自定义 Web 部件中使用。我找不到任何关于在我自己的自定义 Web 部件中设置它们的文档，希望有人能指出我正确的方向。

【参考方案1】：

听起来你把一些事情搞混了。每个 Web 部件都有属性。每个属性都有一个关联的控件。您使用的控件基于字段的数据类型。

如果您的 webparts 属性上有一个长文本数据类型，您应该能够选择富文本编辑器作为您的控件。然后为所见即所得编辑器创建一个自定义小部件。

现在，如果您不想使用 WYSIWYG 编辑器，请创建您自己的 custom form control.

Check out this article 关于自定义 WYSIWYG 编辑器。在文章的末尾，它引用了您的所见即所得编辑器的自定义小部件。

【讨论】：

我的自定义 Web 部件确实有一个具有长文本数据类型的属性（命名为标题）和一个富文本编辑器作为其控件。根据您的评论，看来我可能需要创建自己的自定义小部件。我还没有创建自定义小部件，所以这对我来说是新领域。

感谢 Brenden，我找到了这些参考资料，但它们并没有真正解决我的具体问题。通过演示如何将小部件添加到 Web 部件，它们确实帮助我找到了一条完全不同的功能，我需要构建一个完全不同的功能！

【参考方案2】：

所以答案就在我的眼皮底下，虽然有点隐蔽。

在 /CMS/CMSAdminControls/CKeditor/config.js 中，我添加了自己的自定义工具栏，我已经创建了该工具栏，但我不知道如何将其交给 Web 部件属性。

    config.toolbar_Caption =
    [
        ['Undo', 'Redo', '-'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'Scayt', '-'],
        ['Bold', '-'],
        ['InsertLink', 'Unlink', '-'],
        ['Maximize']
    ];

Web 部件有一个名为 Caption 的属性，Data type 设置为 Long text，表单控制设置为富文本编辑器。

在编辑控件设置下，展开高级以访问工具栏集并将其设置为自定义工具栏。在我的示例中，这将是 Caption。

还将工具栏位置设置为In，以便工具栏位于文本区域内，而不是浮动在整个表单的顶部。