文档AEM GuidesAEM Guides 文档

自定义工具栏 id172FB00L0V6

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 有经验的
  • 管理员

默认情况下，Web编辑器附带了任何DITA编辑器所需的最常见编辑功能。 编辑器中提供了插入列表\（编号或项目符号\）类型的元素、交叉引用、内容引用、表格、段落和字符格式等功能。 除了这些基本元素之外，您还可以自定义Web编辑器以插入在创作环境中使用的元素。

可通过两种方式自定义Web编辑器的工具栏：

  • 向工具栏添加新功能

  • 从工具栏中删除任何现有功能

在工具栏中添加功能

向Web编辑器添加功能涉及两个主要任务 — 在​ ui_config.json ​文件中为该功能添加图标，以及在JavaScript中添加后台功能。

执行以下步骤以将功能添加到Web编辑器的工具栏：

  1. 要下载UI配置文件，请以管理员身份登录到Adobe Experience Manager。

  2. 单击顶部的Adobe Experience Manager链接，然后选择​ 工具。

  3. 从工具列表中选择​ 指南 ​并单击​ 文件夹配置文件。

  4. 单击​ 全局配置文件 ​拼贴。

  5. 选择​ XML编辑器配置 ​选项卡，然后单击顶部的​ 编辑 ​图标

  6. 单击​ 下载 ​图标可在本地系统上下载ui_config.json文件。 然后，您可以对文件进行更改，然后上传相同的更改。

  7. 在ui_config.json文件中，在工具栏部分中添加新功能的定义。 保存文件并将其上传。

    通常，您可以创建新的工具栏按钮组，并向其添加一个或多个工具栏按钮。 或者，您可以在现有工具栏组中添加新的工具栏按钮。 需要以下详细信息才能创建新的工具栏组：

    类型： 指定blockGroup作为type值。 此值表示您正在创建包含一个或多个工具栏组的块组。

    extraclass： 用空格分隔的一个或多个类的名称。

    项： 在工具栏中指定所有组的定义。 每个组可以包含一个或多个工具栏图标。 若要在工具栏组中定义图标，您需要在items中再次定义type属性，并将其值设置为buttonGroup。 在extraclass属性中指定一个或多个类名。 在label属性中指定功能名称。 ui_config.json文件中的以下代码片段显示了主工具栏块的定义，后跟buttonGroup定义：

    code language-none 
    “

” “工具栏”： {
"type"： "blockGroup"，
“extraclass”：
“工具栏操作”，
“项”：[
{
"type"： "buttonGroup"，
“extraclass”：“left-controls”，
"label"： "Left Controls"，
“项”：[
“
”
在items集合中，您需要指定一个或多个工具栏图标的定义。

您需要定义以下属性以添加工具栏图标：

类型： 指定button作为type值。 此值表示您正在添加工具栏按钮。

图标： 在工具栏中指定要使用的Coral图标的名称。

变体： 指定quiet作为variant值。

标题： 指定图标的工具提示。

点击： 在JavaScript文件中指定为该功能定义的命令名称。 如果命令需要输入参数，则将命令名称指定为：

   ``Javascript
   "on-click"： {"name"： "AUTHOR_INSERT_ELEMENT"， "args"： "simpletable"}
   “

”
显示或隐藏： 如果要定义show属性，请指定图标的显示模式。 可能的值为 — @isAuthorMode、@isSourceMode、@isPreviewMode、true \（在所有模式下显示\）或false \（在所有模式下隐藏\）。

您还可以定义hide属性，以代替show。 可能的值与show属性中的值相同，唯一的区别是指定的模式不显示图标。

以下示例显示了用户单击工具栏中的“显示版本”图标时的AEM Guides版本号。

将以下代码添加到JavaScript文件：

$(document).ready(setTimeout(function() {
                        fmxml.commandHandler.subscribe({
                        key: 'user.alert',
                        next: function() {
                        alert("AEM Guides version x.x")
                        }
                        })
                        }, 1000))

在​ ui_config.json ​文件中添加以下功能：

"type": "button",
"icon": "alert","variant": "quiet","title": "About AEM Guides","show": "true","on-click": "user.alert"

  1. 创建一个​ clientlib ​文件夹并将您的JavaScript添加到此文件夹中。

  2. 通过将​ apps.fmdita.xml_editor.page_overrides ​的值指定给​ clientlib ​文件夹来更新其类别属性。

  3. 保存​ ui_config.json ​文件并重新加载Web编辑器。

从工具栏中删除功能

有时，您可能不希望提供Web编辑器中当前可用的所有功能，在这种情况下，您可以从Web编辑器的工具栏中删除不需要的功能。

执行以下步骤，从工具栏中删除任何不需要的功能：

  1. 要下载UI配置文件，请以管理员身份登录到Adobe Experience Manager。

  2. 单击顶部的Adobe Experience Manager链接，然后选择​ 工具。

  3. 从工具列表中选择​ 指南，然后单击​ 文件夹配置文件。

  4. 单击​ 全局配置文件 ​拼贴。

  5. 选择​ XML编辑器配置 ​选项卡，然后单击顶部的​ 编辑 ​图标

  6. 单击​ 下载 ​图标可在本地系统上下载ui_config.json文件。 然后，您可以对文件进行更改，然后上传相同的更改。

    ui_config.json文件包含三个部分：

    1. 工具栏： 本节包含编辑器工具栏中所有可用功能的定义，如插入/删除编号列表、(file)关闭、保存、注释等。

    2. 快捷方式： 本节包含指定给编辑器中特定功能的键盘快捷键的定义。

    3. 模板： 本节包含可在文档中使用的DITA元素的预定义结构。 默认情况下，“模板”部分包含段落、简单表格、表格和正文元素的模板定义。 通过为所需元素添加有效的XML结构，可以为任何元素创建模板定义。 例如，如果要向列表中添加一个包含每个新li元素的p元素，则可以在模板部分的末尾添加以下代码以实现此目的：

    code language-css 
    "li": "<li><p></p></li>"

  7. 从工具栏部分中，删除不想向用户公开的功能条目。

  8. 保存​ ui_config.json ​文件并重新加载Web编辑器。

父主题： ​​自定义Web编辑器

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178