Adicionar novo botão acionável personalizado na barra de ferramentas do editor da Web
Neste artigo, aprenderemos como adicionar um novo botão personalizado na barra de ferramentas do editor da Web e chamar javascript para executar a operação personalizada desejada.
A adição de um botão acionável ao editor da Web envolve as seguintes etapas:
- Adicionar o botão no ui_config.json na posição em que é necessário
- Registrar o evento de clique no botão no editor da Web para que o usuário execute uma ação ao clicar nele
Implementar utilizando um exemplo
Vamos entender isso com um exemplo em que um autor deseja adicionar uma referência de jira a uma seção de prólogo de tópico. A seção de prólogo com id de referência jira incorporada pode ser semelhante a:
O elemento "change-request-id" que contém a ID de JIRA deve ser recuperado da API (digamos, com base em uma consulta de JIRA específica descrita pelo aplicativo). Quando o usuário está criando a seção de prólogo, o usuário deve ser capaz de clicar em um botão e inserir uma ID de referência jira na barra de ferramentas do editor da Web, semelhante a:
E quando o usuário clica no botão, ele deve mostrar uma caixa de diálogo que deve puxar as opções possíveis e permitir que o usuário selecione a ID JIRA desejada, algo como:
que deve então adicionar o "change-request-id" ao prólogo:
A implementação desta
Adicione o botão no webeditor, configurando-o em ui_config.json
Use os perfis de pasta para verificar o ui_config.json na guia "Configuração do editor XML" e adicionar a configuração de botão JSON na seção desejada do grupo "barra de ferramentas"
{
"on-click":"insertJIRARef",
"icon":"linkCheck",
"variant":"quiet",
"type":"button",
"title":"Insert JIRA Reference"
}
use este link para saber mais sobre o Perfil de pasta e a configuração ui_config.json
Manipular o evento ao clicar para o novo botão
OBSERVAÇÃO: as etapas mencionadas abaixo estão disponíveis como pacote anexado nesta publicação
- Depois de salvar o perfil de pasta, crie um "cq:ClientLibraryFolder" em um diretório de projeto (pode estar em /apps) e adicione propriedades conforme mostrado na captura de tela abaixo:
This example uses "coralui3" library to show a dialog as it is used in the Javascript sample we presented.
You may use different library of your choice.
-
Nessa pasta da biblioteca do cliente, crie dois arquivos, conforme mencionado abaixo:
- overrides.js: que terá o código javascript para lidar com o evento de clique para "insertJIRARef" (use o pacote anexado para obter o conteúdo deste javascript)
- js.txt: que incluirá o "overrides.js" para habilitar esse javascript
-
Salve as alterações e você estará pronto para testar.
Testes
- Abrir editor da Web
- Nas preferências do usuário, escolha o perfil de pasta no qual você adicionou o ui_config.json personalizado. Se você o adicionou ao Perfil global, provavelmente já está usando isso.
- Abra um tópico, você notará a barra de ferramentas com um novo botão "Inserir referência Jira"
- Você pode então adicionar a seção do prólogo conforme fornecido abaixo ao tópico e tentar clicar no botão "Inserir referência do Jira" dentro do elemento do prólogo "change-request-reference"
<prolog>
<change-historylist>
<change-item>
<change-request-reference>
</change-request-reference>
<change-completed></change-completed>
<change-summary></change-summary>
</change-item>
</change-historylist>
</prolog>
Consulte a captura de tela abaixo para saber como ela será:
Anexos
- Exemplo de pacote clientlibs que instalará a biblioteca do cliente webeditor com código javascript para a ação de botão da barra de ferramentas: baixar usando este link
- Exemplo ui_config.json que você pode carregar para um perfil de pasta: baixar exemplo ui_config.json
Please note this is compatible to AEM 6.5 and AEM Guides version 4.2.
If you are using a different version please add the toolbar button to the ui_config.json manually.