Você usa editores HTML WYSIWYG em seus projetos? Essas ferramentas fáceis de usar tornaram-se cada vez mais populares entre desenvolvedores web e criadores de conteúdo, oferecendo uma interface intuitiva para criar conteúdo web sem se aprofundar no código HTML bruto. Embora esses editores sejam poderosos desde o início, seu verdadeiro potencial geralmente é desbloqueado por meio da personalização.

Principais conclusões

• Você pode adicionar novos recursos aos editores HTML WYSIWYG

• Botões personalizados ajudam os usuários a formatar conteúdo facilmente

• Alterar a aparência do editor pode combinar com o estilo do seu site

Por que mudar os editores de HTML WYSIWYG?

Alterar um editor HTML WYSIWYG permite:

1. Adicione recursos que seu projeto precisa

2. Facilite o uso dos usuários

3. Mantenha a mesma formatação em todo o seu site

Agora, vamos ver como podemos fazer isso com um exemplo real.

Adicionando um botão de destaque útil

Muitas vezes, queremos destacar algum texto. Vamos adicionar um botão que faça isso rapidamente. Primeiro, precisamos adicionar o editor à nossa página:

Então, podemos adicionar nosso novo botão:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Este código faz algumas coisas:

1. Cria um novo ícone para nosso botão

2. Diz ao editor o que fazer quando alguém clica no botão

3. Adiciona nosso novo botão à barra de ferramentas

Para deixar o texto destacado com boa aparência, adicionamos algum estilo:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Fazendo com que o editor tenha uma boa aparência

Você também pode alterar a aparência do editor. Esta é uma maneira simples de fazer isso:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Essa mudança faz várias coisas:

• Configura botões para diferentes tamanhos de tela

• Adiciona algum texto para mostrar onde digitar

• Desativa o contador de caracteres

• Faz com que a barra de ferramentas se mova com a página

• Ele usa um tema pré-fabricado

Dicas para alterar editores de HTML WYSIWYG

Ao mudar esses editores, lembre-se destas dicas:

1. Comece pequeno: faça pequenas alterações antes de tentar grandes.

2. Use o que está lá: use as ferramentas integradas do editor quando puder.

3. Teste muito: certifique-se de que suas alterações funcionem em navegadores diferentes.

4. Pense na velocidade: grandes mudanças podem tornar as coisas mais lentas, então teste com muito conteúdo.

5. Mantenha-se atualizado: verifique se há novos recursos que podem ajudar você.

Usando editores alterados em estruturas diferentes

Você pode usar esses editores alterados em muitas estruturas da web. Veja como você pode usar nosso editor alterado no React:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

Este componente React envolve nosso editor alterado, tornando-o fácil de usar em seu aplicativo React.

Concluindo

Os editores HTML WYSIWYG são ótimas ferramentas para criar conteúdo. Além disso, quando você os altera para atender às suas necessidades, eles ficam ainda melhores. Ao adicionar novos botões, alterar sua aparência e ajustá-los ao seu projeto, você pode criar uma ferramenta de edição perfeita.

Lembre-se, o objetivo é fazer com que o editor funcione perfeitamente para você. Com algumas mudanças inteligentes, você pode transformar um bom editor em um ótimo editor que se adapta perfeitamente ao seu trabalho.

Então, vá em frente e experimente! Mude seu editor HTML WYSIWYG e veja como ele pode ser melhor para seus usuários.

Esta post foi publicada inicialmente no blog de Froala.