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