Draft - Editor Mail

by Daniel Gualberto

HTML

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Editor TinyMCE Personalizado</title>

    <!-- Incluindo o TinyMCE -->
    <script
      src="https://cdn.tiny.cloud/1/hc0q4qbcvs6wsprk9krd7lsjwlceyx3k8yp5l7lv6a8t8vps/tinymce/6/tinymce.min.js"
      referrerpolicy="origin"
    ></script>

    <script>
      // Inicializando o TinyMCE com as opções especificadas
      tinymce.init({
        language: "pt_BR",
        selector: "#editor",
        height: 400,
        menubar: false, // Remove a barra de menu
        plugins: "lists link image table hr", // Plugins necessários
        toolbar:
          "fontsize forecolor | bold italic underline strikethrough superscript subscript | " +
          "alignleft aligncenter alignright alignjustify | numlist bullist | link image hr table", // Botões da toolbar
        toolbar_mode: "sliding", // Permite a quebra de linha na toolbar, se necessário
        toolbar_sticky: true,
        content_style: "body { font-family:Arial,sans-serif; font-size:14px }", // Estilo do conteúdo
      })

      // Função para copiar o conteúdo do TinyMCE para a textarea
      function enviarConteudo() {
        // Obtém o conteúdo do editor
        var conteudo = tinymce.get("editor").getContent()
        // Serializa o conteúdo (se necessário)
        var conteudoSerializado = JSON.stringify({ conteudo: conteudo })
        // Aqui apenas o insere na outra textarea
        document.getElementById("conteudoSerializado").value =
          conteudoSerializado
      }
    </script>
  </head>
  <body>
    <!-- Área do TinyMCE -->
    <h2>Editor de Texto</h2>
    <textarea id="editor"></textarea>

    <!-- Botão Enviar -->
    <button type="button" onclick="enviarConteudo()">Enviar</button>

    <!-- Textarea para o conteúdo serializado -->
    <h2>Conteúdo Serializado</h2>
    <textarea id="conteudoSerializado" rows="10" cols="80"></textarea>
  </body>
</html>