logo

Paleta - Deixe colorido🎨

Palette — Construtor visual de páginas. Não precisa ser designer.

Demonstração ao vivo Baixar Palette

Scroll
  1. Início

CKEditor TextSelection para Drupal: mantenha o cursor e a seleção ao alternar para o modo Source

12/05/2026, by Ivan

Se você edita conteúdo no Drupal há tempo suficiente, com certeza já esbarrou nesta pequena, mas irritante, quebra de fluxo de trabalho: você seleciona uma palavra ou posiciona o cursor, alterna para o Source para ajustar a marcação e… perde o lugar. Fiz um pequeno módulo que corrige exatamente isso.

O que o módulo faz

CKEditor TextSelection é um módulo Drupal que integra o plugin “Text Selection” do CKEditor 5 ao editor CKEditor 5 no Drupal. Seu objetivo principal é simples: preservar a posição do cursor e a seleção de texto ao alternar entre WYSIWYG e Source — e manter a seleção visível, rolando-a até a área visível.

  • Preserva a posição do cursor ao alternar WYSIWYG ↔ Source.
  • Preserva a seleção real de texto (e não apenas o cursor).
  • Rola a área visível para que a seleção fique visível em ambos os modos.
  • Funciona muito bem em conjunto com o CKEditor CodeMirror Source Editing para uma edição mais confortável no modo Source.
  • Inspirado no comportamento do clássico complemento do CKEditor 4: CKEditor 4 TextSelection .

Por que isso importa (um detalhe de UX que realmente economiza tempo)

Os editores alternam para o Source por bons motivos: limpar marcação colada, ajustar o atributo de um link, corrigir a estrutura de uma lista, verificar títulos ou garantir que o HTML seja exatamente como pretendido. Perder a seleção/cursor a cada alternância gera atrito — especialmente em textos longos. O objetivo deste módulo é simples: ajudar você a não sair do fluxo.

Como funciona (em linhas gerais)

Ao passar do WYSIWYG para o Source, o plugin mapeia a posição atual do cursor ou a seleção do modelo do editor para a posição correspondente no código-fonte HTML. Ao voltar, ele lê o cursor/seleção no Source e o restaura no editor visual. Se algo não puder ser mapeado perfeitamente (às vezes ocorrem casos extremos), o módulo se comporta corretamente sem quebrar o editor.

Experimente (demo)

Quer ver o plugin básico do CKEditor 5 em ação? Abra a demo, selecione uma frase, alterne para o Source — e veja que a seleção permanece no lugar: CKEditor 5 Text Selection Plugin Demo .

Links do projeto Drupal

Instalação

1) Instalação via Composer

Instale o módulo usando o Composer (recomendado). Se precisar de uma versão específica, escolha-a na página de versões .

composer require drupal/ckeditor_textselection

2) Ative o módulo

Ative o CKEditor TextSelection como qualquer módulo contrib (pela interface ou com o Drush).

3) Ative-o no seu formato de texto

  1. Vá em Administration → Configuration → Content authoring → Text formats and editors.
  2. Abra o formato que usa o CKEditor 5.
  3. Nas configurações do CKEditor 5, ative o plugin Text Selection.
  4. Certifique-se de que o botão Source editing esteja disponível na barra de ferramentas (o modo Source é necessário para a alternância).
  5. Salve as configurações do formato de texto.

4) Pronto

Não são necessárias configurações adicionais. Depois de ativado, a preservação da seleção funciona automaticamente sempre que você alterna os modos.

Uso em conjunto com o CodeMirror Source Editing

Se sua equipe editorial prefere realce de sintaxe no modo Source, use este módulo junto com o CKEditor CodeMirror Source Editing . Isso melhora a legibilidade e, ao mesmo tempo, mantém funcionando a preservação da seleção.

Nos bastidores: projetos upstream

O módulo Drupal é construído em torno do plugin upstream do CKEditor 5. Se quiser ver o código ou contribuir:

Comentários e contribuições são bem-vindos

Ficarei feliz em receber comentários de editores, site builders e desenvolvedores Drupal — especialmente sobre casos extremos complexos, em que o mapeamento da seleção entre WYSIWYG e HTML pode ser ambíguo. Compartilhe seus resultados, abra tarefas ou participe do desenvolvimento: CKEditor TextSelection no Drupal.org .