自定义工具栏 id172FB00L0V6
默认情况下,Web编辑器附带了任何DITA编辑器所需的最常见编辑功能。 编辑器中提供了插入列表\(编号或项目符号\)类型的元素、交叉引用、内容引用、表格、段落和字符格式等功能。 除了这些基本元素之外,您还可以自定义Web编辑器以插入在创作环境中使用的元素。
ui_config的更新必须转换为更灵活和模块化的UI配置。 此框架有助于在适用的情况下无缝地采用对editor_toolbar和其他目标构件所做的更改。 有关详细信息,请查看转换UI配置概述。可通过两种方式自定义Web编辑器的工具栏:
- 向工具栏添加新功能
- 从工具栏中删除任何现有功能
在工具栏中添加功能
向Web编辑器添加功能涉及两个主要任务 — 在 ui_config.json 文件中为该功能添加图标,以及在JavaScript中添加后台功能。
执行以下步骤以将功能添加到Web编辑器的工具栏:
-
要下载UI配置文件,请以管理员身份登录到Adobe Experience Manager。
-
单击顶部的Adobe Experience Manager链接,然后选择工具。
-
从工具列表中选择 指南 并单击文件夹配置文件。
-
单击 全局配置文件 拼贴。
-
选择 XML编辑器配置 选项卡,然后单击顶部的 编辑 图标
-
单击 下载 图标可在本地系统上下载ui_config.json文件。 然后,您可以对文件进行更改,然后上传相同的更改。
-
在
ui_config.json文件中,在工具栏部分中添加新功能的定义。 保存文件并将其上传。通常,您可以创建新的工具栏按钮组,并向其添加一个或多个工具栏按钮。 或者,您可以在现有工具栏组中添加新的工具栏按钮。 需要以下详细信息才能创建新的工具栏组:
类型: 指定
blockGroup作为type值。 此值表示您正在创建包含一个或多个工具栏组的块组。extraclass: 用空格分隔的一个或多个类的名称。
项: 在工具栏中指定所有组的定义。 每个组可以包含一个或多个工具栏图标。 若要在工具栏组中定义图标,您需要在
type中再次定义items属性,并将其值设置为buttonGroup。 在extraclass属性中指定一个或多个类名。 在label属性中指定功能名称。ui_config.json文件中的以下代码片段显示了主工具栏块的定义,后跟buttonGroup定义:code language-none "toolbar": { "type": "blockGroup", "extraclass": "toolbar operations", "items": [ { "type": "buttonGroup", "extraclass": "left-controls", "label": "Left Controls", "items": [在
items集合中,您需要指定一个或多个工具栏图标的定义。您需要定义以下属性以添加工具栏图标:
类型: 指定
button作为type值。 此值表示您正在添加工具栏按钮。图标: 在工具栏中指定要使用的Coral图标的名称。
变体: 指定
quiet作为variant值。标题: 指定图标的工具提示。
点击: 在JavaScript文件中指定为该功能定义的命令名称。 如果命令需要输入参数,则将命令名称指定为:
code language-javascript "on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}显示或隐藏: 如果要定义
show属性,请指定图标的显示模式。 可能的值为 —@isAuthorMode、@isSourceMode、@isPreviewMode、true\(在所有模式下显示\)或false\(在所有模式下隐藏\)。您还可以定义
show属性,以代替hide。 可能的值与show属性中的值相同,唯一的区别是指定的模式不显示图标。以下示例显示了用户单击工具栏中的“显示版本”图标时的AEM Guides版本号。
将以下代码添加到JavaScript文件:
code language-javascript $(document).ready(setTimeout(function() { fmxml.commandHandler.subscribe({ key: 'user.alert', next: function() { alert("AEM Guides version x.x") } }) }, 1000))在 ui_config.json 文件中添加以下功能:
code language-javascript "type": "button", "icon": "alert","variant": "quiet","title": "About AEM Guides","show": "true","on-click": "user.alert" -
创建一个 clientlib 文件夹并将您的JavaScript添加到此文件夹中。
-
通过将 apps.fmdita.xml_editor.page_overrides 的值指定给 clientlib 文件夹来更新其类别属性。
-
保存 ui_config.json 文件并重新加载Web编辑器。
从工具栏中删除功能
有时,您可能不希望提供Web编辑器中当前可用的所有功能,在这种情况下,您可以从Web编辑器的工具栏中删除不需要的功能。
执行以下步骤,从工具栏中删除任何不需要的功能:
-
要下载UI配置文件,请以管理员身份登录到Adobe Experience Manager。
-
单击顶部的Adobe Experience Manager链接,然后选择工具。
-
从工具列表中选择指南,然后单击文件夹配置文件。
-
单击 全局配置文件 拼贴。
-
选择 XML编辑器配置 选项卡,然后单击顶部的 编辑 图标
-
单击 下载 图标可在本地系统上下载ui_config.json文件。 然后,您可以对文件进行更改,然后上传相同的更改。
ui_config.json文件包含三个部分:-
工具栏: 本节包含编辑器工具栏中所有可用功能的定义,如插入/删除编号列表、(file)关闭、保存、注释等。
-
快捷方式: 本节包含指定给编辑器中特定功能的键盘快捷键的定义。
-
模板: 本节包含可在文档中使用的DITA元素的预定义结构。 默认情况下,“模板”部分包含段落、简单表格、表格和正文元素的模板定义。 通过为所需元素添加有效的XML结构,可以为任何元素创建模板定义。 例如,如果要向列表中添加一个包含每个新
p元素的li元素,则可以在模板部分的末尾添加以下代码以实现此目的:
code language-css "li": "<li><p></p></li>" -
-
从工具栏部分中,删除不想向用户公开的功能条目。
-
保存 ui_config.json 文件并重新加载Web编辑器。
父主题:自定义Web编辑器