Personalizar barra de ferramentas id172FB00L0V6

Para baixar o arquivo de configuração da interface do usuário, faça logon no Adobe Experience Manager como administrador.

Clique no link do Adobe Experience Manager na parte superior e escolha Ferramentas.

Selecione Guias na lista de ferramentas e clique em Perfis de Pasta.

Clique no bloco Perfil Global.

Selecione a guia Configuração do editor XML e clique no ícone Editar na parte superior

Clique no ícone Baixar para baixar o arquivo ui_config.json em seu sistema local. Em seguida, você pode fazer alterações no arquivo e fazer upload do mesmo.

No arquivo ui_config.json, adicione a definição do novo recurso na seção de barras de ferramentas. Salve o arquivo e faça upload dele.

Normalmente, você pode criar um novo grupo de botões da barra de ferramentas e adicionar um ou mais botões da barra de ferramentas a ele. Ou você pode adicionar um novo botão de barra de ferramentas em um grupo existente. Os detalhes a seguir são necessários para criar um novo grupo de barras de ferramentas:

tipo: Especifique blockGroup como o valor type. Esse valor indica que você está criando um grupo de blocos que conteria um ou mais grupos da barra de ferramentas.

classe_de_extração: Nome da classe ou classes separadas por espaço.

itens: Especifique a definição de todos os grupos na barra de ferramentas. Cada grupo pode conter um ou vários ícones da barra de ferramentas. Para definir ícones em um grupo de barras de ferramentas, você precisa definir novamente o atributo type em items e definir seu valor como buttonGroup. Especifique um ou mais nomes de classe na propriedade extraclass. Especifique o nome do recurso na propriedade label. O trecho a seguir do arquivo ui_config.json mostra a definição do bloco da barra de ferramentas principal, seguida pela definição buttonGroup:

"
"barra de ferramentas": {
"type": "blockGroup",
"classe de extração":
"operações da barra de ferramentas",
"itens": [
{
"tipo": "buttonGroup",
"extraclass": "left-controls",
"rótulo": "Controles de Esquerda",
"itens": [
"

Na coleção items, é necessário especificar a definição de um ou mais ícones da barra de ferramentas.

É necessário definir as seguintes propriedades para adicionar um ícone da barra de ferramentas:

tipo: Especifique button como o valor type. Esse valor indica que você está adicionando um botão da barra de ferramentas.

ícone: Especifique o nome do ícone Coral que deseja usar na barra de ferramentas.

variante: Especifique quiet como o valor variant.

título: Especifique a dica de ferramenta do ícone.

ao clicar: Especifique o nome do comando definido para o recurso no arquivo JavaScript. Se o comando exigir parâmetros de entrada, especifique o nome do comando como:

"Javascript
"ao clicar": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}
"

mostrar ou ocultar: Se você estiver definindo a propriedade show, especifique os modos nos quais o ícone será exibido. Os valores possíveis são - @isAuthorMode, @isSourceMode, @isPreviewMode, true (exibir em todos os modos), ou false (ocultar em todos os modos).

No lugar de show, você também pode definir a propriedade hide. Os valores possíveis são os mesmos da propriedade show com a única diferença de que o ícone não é exibido para o modo especificado.

O exemplo a seguir mostra o número da versão do AEM Guides quando o usuário clica no ícone Mostrar versão na barra de ferramentas.

Adicione o seguinte código a um arquivo do JavaScript:

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

Adicione o recurso no arquivo ui_config.json como:

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

Crie uma pasta clientlib e adicione seu JavaScript a essa pasta.

Atualize a propriedade categories da pasta clientlib atribuindo o valor de apps.fmdita.xml_editor.page_overrides.

Salve o arquivo ui_config.json e recarregue o Editor da Web.

Para baixar o arquivo de configuração da interface do usuário, faça logon no Adobe Experience Manager como administrador.

Clique no link do Adobe Experience Manager na parte superior e escolha Ferramentas.

Selecione Guias na lista de ferramentas e clique em Perfis de Pasta.

Clique no bloco Perfil Global.

Selecione a guia Configuração do editor XML e clique no ícone Editar na parte superior

Clique no ícone Baixar para baixar o arquivo ui_config.json em seu sistema local. Em seguida, você pode fazer alterações no arquivo e fazer upload do mesmo.

O arquivo ui_config.json tem três seções:

1. barras de ferramentas: Esta seção contém a definição de todos os recursos disponíveis na barra de ferramentas do editor, como Inserir/Remover lista numerada, (arquivo) Fechar, Salvar, Comentários e muito mais.

2. atalhos: Esta seção contém a definição de atalhos de teclado atribuídos a um recurso específico no editor.

3. modelos: Esta seção contém a estrutura predefinida de elementos DITA que você pode usar no documento. Por padrão, a seção de modelos contém definições de modelo para um parágrafo, tabela simples, tabela e elementos de corpo. É possível criar uma definição de modelo para qualquer elemento adicionando uma estrutura XML válida para o elemento desejado. Por exemplo, se você deseja adicionar um elemento p a cada novo elemento li em uma lista, é possível adicionar o seguinte código no final da seção de modelos para fazer isso:

"li": "<li><p></p></li>"

Na seção de barras de ferramentas, remova a entrada do recurso que você não deseja expor aos usuários.

Salve o arquivo ui_config.json e recarregue o Editor da Web.