Faça seu Drupal 9 CKEditor Pop - 7 módulos úteis que você não sabia que existiam

O editor de conteúdo é basicamente a função mais importante de um CMS. E com uma potência como o CKEditor como sua ferramenta padrão de edição de rich text, o Drupal aumentou seu jogo de gerenciamento de conteúdo consideravelmente com vários novos recursos para o Drupal 8/9, como o sistema de widgets CKEditor e o Filtro de Conteúdo Avançado (ACF). Então, sim, é muito poderoso, mesmo com os recursos padrão ... Mas você pode realmente melhorar seu jogo CKEditor com a ajuda de alguns módulos e plug-ins contribuídos. Continue lendo para saber mais sobre os melhores e mais interessantes complementos para estender os recursos e a usabilidade do CKEditor.

O Drupal 9 CKEditor

Primeiro, para aqueles que são novos no Drupal, CKEditor 4.5 é o editor WYSIWYG padrão (o que você vê é o que você obtém) no Drupal 8/9. É um editor de texto que ajuda os administradores de sites a escrever e editar o conteúdo diretamente nas páginas da web. Como o Drupal, o CKEditor é um projeto de código aberto e recentemente foi atualizado com muitos novos recursos poderosos que continuarão a ser aprimorados. Como parte da iniciativa de preparação do Drupal 10, os contribuidores do Drupal estão trabalhando para implementar a versão mais recente e moderna - CKEditor 5 - no Drupal 10.

Agora que já entendemos o básico, vamos entrar nas atualizações!

Estendendo o CKEditor com esses fantásticos módulos Drupal 9

1. CKEditor Leia mais

Você conhece aqueles momentos em que deseja dar ao leitor a opção de ver o resto de uma grande quantidade de texto? Essa é a sua dica para usar o recurso Leia mais do CKEditor, que convida seus usuários a “continuar lendo” enquanto fornece um layout compacto à sua página. Para adicioná-lo, o Drupal 9 oferece uma maneira simples e fácil de habilitar a funcionalidade Ler mais / Mostrar menos depois de instalar o módulo do contribuidor.

Implementando o módulo:

Depois de instalar este módulo, você precisará definir algumas configurações:

1. Edite o formato de texto preferido e habilite “Limitar tags HTML permitidas”.
2. Adicione <div data-readmore-less-text data-readmore-more-text data-readmore-type class = "ckeditor-readmore"> em “Tags HTML permitidas”. Desative o “Limitar tags HTML permitidas” e clique em Salvar.
3. Agora arraste e solte o ícone “Leia mais” dos botões disponíveis para a barra de ferramentas Ativa (como mostrado na imagem acima) e clique em salvar.
4. Depois de limpar o cache, você encontrará o ícone “ Leia mais ” no editor de texto ao escolher o “formato de texto preferido”.

Como usá-lo:

Na área de conteúdo, clique no ícone “ Formato de texto ”. Agora você obterá uma caixa retangular. Adicione o restante do conteúdo que você deseja mostrar depois que o usuário clicar em Ler mais.

Perguntas frequentes: Posso modificar o texto Leia mais?

Absolutamente! Basta clicar na guia “botão Leia mais” em “Configurações do plugin CKEditor” e alterar o texto.

2. Botão de cor CKEditor

Por padrão, o CKEditor não oferece a opção de alterar a cor do texto no editor. Mas se você quiser mudar a cor de um texto específico ou mesmo realçar o texto com cores diferentes, o módulo de botão de cor do Drupal 9 CKEditor deve estar em sua lista. Observe que este módulo requer que o módulo de botão do painel também seja instalado e ambos os módulos requerem que as bibliotecas, Biblioteca de botões de cores e Biblioteca de botões do painel sejam instaladas. Depois de instalar os módulos e adicionar bibliotecas na pasta de bibliotecas do tema, podemos mover o botão de cores de Botões disponíveis para a barra de ferramentas Ativa no formato de texto preferido.

FAQ: Posso adicionar uma cor personalizada?

Sim! Se não quiser usar nenhuma das cores padrão já disponíveis, você também pode definir uma cor personalizada. Você pode fazer isso na seção “Formato dos editores de texto”, onde ativou as opções de cores. Encontre o “botão Cor do CKEditor” na seção “Configuração de plug-ins do CKEditor” de “Formato dos editores de texto” e adicione cor na área de texto “Cores do texto” separados por vírgulas e sem o sinal #.

3. CKEditor Youtube

O módulo Drupal 9 CKEditor Youtube ajuda você a adicionar vídeos do Youtube ao seu conteúdo sem um código de incorporação longo. Depois de instalar e mover o formulário do ícone do Youtube de Botões disponíveis para a barra de ferramentas Ativa, você pode encontrar os ícones do Youtube no editor de texto no formato de texto preferido. Este módulo depende da biblioteca.

Uma das melhores coisas sobre este módulo é a flexibilidade. Conforme mostrado na captura de tela acima, você pode “Colar código de incorporação” ou colar uma URL do Youtube enquanto especifica a largura e a altura. Além disso, você tem opções úteis como “Autoplay”, “Iniciar às (hora específica)” e “Mostrar controles do jogador”.

4. Interface do usuário dos modelos CKEditor e modelos CKEditor

Você tem a mesma estrutura de conteúdo para as páginas ou postagens do seu site? Os módulos CKEditor Templates e CKEditor Templates Interface do usuário são o seu tíquete para uma duplicação fácil. Ambos os módulos dependem de bibliotecas que podem ser baixadas e instaladas conforme as instruções nas páginas do módulo. Depois de instalar essas bibliotecas, você pode mover o ícone do modelo dos botões Disponíveis para a barra de ferramentas Ativa, conforme mostrado na imagem abaixo.

O módulo Modelos do CKEditor fornece um pop-up de caixa de diálogo com modelos predefinidos. Quando você clica no ícone do modelo (como mostrado na imagem acima), você verá uma janela pop-up aberta e escolherá qualquer um dos seus modelos predefinidos. O modelo será então inserido com “formatos e estilos de texto” incluídos.

O módulo CKEditor Templates User Interface é o que você usa para criar os templates que você escolhe no módulo CKEditor Templates . Depois de habilitar o módulo, você encontrará uma opção na seção Config> Autoria de Conteúdo> Modelos CKEditor .

Ao clicar em Modelos do CKEditor na configuração, você será redirecionado para a página de modelos de configuração do CKEditor . Agora você pode adicionar ou editar modelos.

5. CKEditor CodeSnippet

Usando o módulo CKEditor CodeSnippet, você pode adicionar seu "conteúdo de código" dentro do conteúdo para que seja destacado e bem formatado. Este módulo usa a biblioteca highlight-js e todos os estilos disponíveis para ela. Instalar este módulo usando o composer instalará a biblioteca automaticamente. Depois de instalar este módulo, você pode mover o ícone “snippet de código” do botão Disponível para a barra de ferramentas Ativa.

Agora você encontrará a guia Snippet de código nas configurações do plug-in CKEditor de formato de texto. Aqui você pode marcar / desmarcar as linguagens de programação suportadas.

FAQ: Como usar?

Depois de instalar o módulo, você pode inserir o recurso CodeSnippet em seu conteúdo do CKEditor. Ao clicar no ícone do snippet de código, você verá um pop-up. Aqui, você pode colar seu código e selecionar o idioma do código.

6. CKEditor Wordcount

Então você está trabalhando com um limite de palavras / caracteres ... Esta é uma situação comum em sites altamente estilizados com layouts dinâmicos. E isso pode ficar especialmente confuso com várias mãos trabalhando no mesmo conteúdo. Nestes casos, é útil ver o número de caracteres e palavras no seu CKEditor no rodapé do próprio editor (assim como você faria no MS Word). É quando você instalaria o módulo CKEditor Wordcount. Depois de instalar o módulo e a biblioteca, você pode encontrar “contagem de palavras e contagem de caracteres” nas configurações do plugin CKEditor de formato de texto. Aqui, você pode marcar / desmarcar recursos de acordo com sua necessidade. Você também encontrará um contador no CKEditor na parte inferior direita dele.

7. Texto para Tweetable do CKEditor

Tentando marcar alguns pontos de internet? Usando o módulo Tweetable Text do CKEditor, você pode dar a opção de seus usuários tweetarem uma parte específica do texto clicando em uma palavra ou sintaxe. Basta instalar o módulo e a biblioteca conforme as instruções na página do módulo e mover o ícone de texto tweetável do botão Disponível para a barra de ferramentas Ativa. Em seguida, você encontrará um ícone de tweet no editor de texto. Ao clicar neste ícone, uma janela pop-up será exibida. Aqui, você pode adicionar um Texto de exibição (para quais palavras você deseja adicionar o ícone do tweet) e um Texto para tweetar (o texto que aparecerá no tweet). Quando um usuário clica em Exibir texto , ele redireciona para o Twitter e o texto para tweetar é exibido.