Revelado! Propósito, Funções e Mecanismo do KuroEditor vol. 2

Diretriz de Desenvolvimento

Como este editor é para o KuroCMS, meu objetivo é fornecer o máximo de versatilidade possível, mantendo-me fiel à sua essência principal. Um editor WYSIWYG é obrigatório, construído com Vanilla JS puro. Deve ser excepcionalmente rápido, sem frameworks. Evitei que fosse um editor estritamente headless para manter um acoplamento flexível. Contanto que o chamador não especifique um @layer, ele pode manter um senso de unidade seguindo o layout de botões do chamador — embora eu não vá usar isso no KuroCMS! rs.

O CSS usa apenas Tailwind mais estilos internos para o KuroEditor. O comportamento das tabelas é semelhante ao do Dropbox Paper. Por enquanto, mesmo que não esteja perfeitamente polido, desde que a usabilidade não seja significativamente comprometida, priorizarei a conclusão em detrimento de ajustes finos. Afinal, não começa até que esteja terminado. Eu o lançarei desde que esteja razoavelmente utilizável.

Especificações Detalhadas

Explicar especificações detalhadas em um blog pode ser tedioso, então vou mostrar a você com imagens.

Como mostrado, o KuroEditor possui dois tipos de visualizações no menu superior: visualização de página e HTML. No entanto, espero que a maioria não use a visualização HTML. Ela é destinada a quem deseja escrever recursos ainda não presentes no KuroEditor usando HTML, ou para quem deseja verificar o comportamento interno via HTML.

Em seguida, temos ícones para emojis, criação de tabelas, mídia, código, linhas horizontais, salvamento automático, salvamento e índice. Mídias básicas podem ser coladas livremente na posição do cursor usando arrastar e soltar, portanto, este botão raramente é usado.

Decoração Básica de Texto

As decorações para texto e para a linha do cursor aparecem sempre que um único caractere é selecionado. Isso segue a política de não querer exibir menus constantemente. Também visa minimizar a distância de movimento do mouse.

Da esquerda: Negrito, Itálico, Sublinhado, Tachado. Em seguida, vêm as configurações H1, H2, etc., para cabeçalhos. Depois, a barra de citação e o bloco de notas. A seguir, cor do texto, tamanho da fonte, altura da linha, alinhamento do texto (esquerda, centro, direita, justificado), listas com marcadores e listas numeradas. (A propósito, pressionar a tecla Tab cria automaticamente um novo parágrafo). *Os tipos de fonte também podem ser selecionados em versões mais recentes.

Tabelas são a Prioridade Máxima

O recurso de tabela é o ponto forte do KuroEditor. Inserir linhas ou colunas é semelhante ao Dropbox Paper: quando o cursor do mouse está próximo a uma borda, um botão '+' aparece ao lado dela. Clicar nele insere uma linha ou coluna. A exclusão é feita com o botão vermelho '-' à direita de uma linha ou abaixo de uma coluna. É incrivelmente fácil manipular tabelas. Mesclar e dividir células também está a um botão de distância. Você pode até escolher a espessura da borda. Mover o mouse perto de uma borda também exibe botões de borda à direita ou na parte inferior, que mostram um menu para ajustar a espessura e a cor.

Posicionamento Flexível de Mídia

A colagem de mídia é totalmente flexível. Não serve apenas para imagens armazenadas pelo chamador; você pode criar facilmente classificações de músicas usando links do YouTube ou listas de vídeos interessantes. Se você deseja inserir uma URL a partir do teclado, digitar url aciona imediatamente a expansão automática.

Usando o Índice (Tabela de Conteúdos)

O gerenciamento de parágrafos para coisas como romances ou contratos é fácil usando H1, H2, etc. Ao usar o índice no menu superior, você pode ver rapidamente até onde digitou, mesmo em documentos longos.

Visão Geral da Integração

Finalmente, a integração é incrivelmente simples. Basta inserir uma linha onde você deseja o editor e preparar funções de retorno (callback) para coisas como salvar. É passado como HTML. No KuroCMS, esse HTML recebido é armazenado e gerenciado como dados de artigos. Para mais detalhes, consulte o link abaixo. Como existem muito poucos pontos de acoplamento, ele pode ser facilmente integrado em qualquer ferramenta.

Conclusão

Os japoneses realmente adoram representações em tabelas (assim como as casas japonesas adoram divisórias! rs). No entanto, poucos editores estrangeiros têm boas implementações. Mesmo quando têm, geralmente são difíceis de usar e carecem de personalização visual. Fico especialmente confuso sobre o motivo pelo qual coisas como mesclagem de células são tão raras. De qualquer forma, espero que o KuroEditor seja útil, mesmo que apenas para algumas pessoas.

[Fontes]

1. Repositório de Código do KuroEditor no GitHub
2. Página de Apresentação do KuroEditor
3. Página de Demonstração e Testes do KuroEditor