Artigo

TinyMCE

Fabrício de Medeiros

Para implementar um editor de HTML em seu formulário de artigos, você pode utilizar um editor de texto WYSIWYG (What You See Is What You Get). Esses editores permitem que os usuários formatem texto, adicionem imagens, links, e outros elementos HTML sem precisar escrever o código diretamente.

Aqui está um exemplo de como você pode implementar o TinyMCE, que é um dos editores WYSIWYG mais populares, em seu formulário de artigos:

1. Inclua o TinyMCE no seu projeto

Primeiro, você precisa incluir o TinyMCE no seu projeto. Isso pode ser feito diretamente a partir de um CDN (Content Delivery Network).

Adicione o seguinte script ao <head> do seu arquivo HTML:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

2. Inicialize o TinyMCE no campo de texto

Depois de incluir o script, você precisa inicializar o TinyMCE no campo de texto onde deseja que o editor seja aplicado. Isso pode ser feito dentro de uma tag <script> no mesmo arquivo HTML ou em um arquivo JavaScript separado.

Por exemplo, se o seu campo de texto tiver o ID conteudo, você pode inicializar o TinyMCE assim:

<script>
  tinymce.init({
    selector: '#conteudo',  // Seletor do elemento onde o TinyMCE será aplicado
    height: 500,  // Altura do editor
    menubar: false,  // Remover a barra de menu
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic backcolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help'
  });
</script>

3. Crie o campo de texto no seu formulário

No seu formulário, você deve ter um campo de texto onde o conteúdo do artigo será inserido. Aqui está um exemplo simples:

<form action="" method="POST">
  <label for="titulo">Título:</label>
  <input type="text" id="titulo" name="titulo" required>

  <label for="conteudo">Conteúdo:</label>
  <textarea id="conteudo" name="conteudo"></textarea>

  <button type="submit">Salvar Artigo</button>
</form>

4. Configurações Adicionais

O TinyMCE é altamente configurável, com muitas opções e plugins disponíveis. Você pode personalizar a barra de ferramentas, adicionar plugins específicos (como upload de imagem), e muito mais conforme suas necessidades.

4.1. Plugin de código

O plugin Code é um dos plugins mais populares porque ele pode expor o raw da área editável html para o usuário. Ele também fornece um excelente exemplo porque adiciona um item de menu e um botão de barra de ferramentas, além de ter opções avançadas de personalização.

A primeira coisa que precisamos fazer é incluir o plugin chave real e atribuir um valor a ela. Como estamos começando com o code plugin, esse valor será `'code'` para este exemplo.

tinymce.init({
  selector: 'textarea',  // note the comma at the end of the line!
  plugins: 'code'
});

Adicione plugins: 'code' ao seu tinymce.html arquivo, salve o arquivo, atualize seu navegador e você verá um pouco de mágica. Um menu "Ferramentas" aparece automaticamente na barra de menus, e ele tem um item "Código-fonte" no menu suspenso. Clique nele e voilà, agora você pode editar o HTML oculto pela interface WYSIWYG.

Vamos também adicionar um controle de barra de ferramentas para que nossos usuários possam ativar essa funcionalidade mais facilmente.

4.2. Plugin de tela cheia

Este plugin adiciona recursos de edição em tela cheia ao TinyMCE. Quando o botão da barra de ferramentas é pressionado, a área editável preencherá a janela de visualização do navegador. O plugin adiciona um botão da barra de ferramentas e um item de menu Fullscreen sob o View menu.

O modo de tela cheia pode ser alternado usando os seguintes atalhos de teclado:

(Windows ou Linux): Ctrl+Shift+F

Configuração básica

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'fullscreen',
  toolbar: 'fullscreen'
});

Com essas etapas, você conseguirá adicionar um editor de HTML ao seu formulário de artigos, permitindo que os usuários criem conteúdo formatado de forma intuitiva.

Deixe um comentário

Explore, Contribua e Cresça Conosco!

Obrigado por ler o nosso artigo! Esperamos que você tenha encontrado informações valiosas e inspiradoras. Se você está empolgado para saber mais, temos uma vasta coleção de artigos sobre tópicos variados, desde tendências tecnológicas até insights sobre desenvolvimento de software. Não deixe de explorar nossas outras publicações!

Quer fazer parte da nossa comunidade?

Inscreva-se no nosso site para receber as últimas atualizações e novidades diretamente no seu e-mail. Seu cadastro é o primeiro passo para se conectar com uma rede de entusiastas e profissionais apaixonados pelo que fazem.

Tem algo a compartilhar?

Adoraríamos ouvir suas ideias, inovações e experiências! Sinta-se à vontade para escrever e enviar seus próprios artigos, códigos ou projetos. Sua contribuição é fundamental para enriquecer nosso conteúdo e ajudar outros leitores a crescer junto com você. Juntos, podemos criar um espaço de aprendizado e troca de conhecimento enriquecedor. Seu conhecimento e entusiasmo são o que fazem nossa comunidade especial.

Inscreva-se Agora | Compartilhe | Contribua com um Artigo
Continue explorando e seja parte da transformação!

Voltar