Textarea like a code. – Blog – Devdata Sistemas

É possível criar um editor de código usando um <textarea> combinado com JavaScript ou bibliotecas específicas para esse propósito. Existem várias bibliotecas JavaScript populares que podem ser usadas para criar editores de código personalizados, como o CodeMirror e o Ace Editor. Essas bibliotecas fornecem recursos avançados, como realce de sintaxe, indentação automática, sugestões de código, entre outros.

Vou criar um exemplo que combina todas as etapas em um único arquivo. Lembre-se de fazer os ajustes necessários no caminho do arquivo e nas senhas para atender às suas necessidades específicas.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
  <textarea id="code-editor"></textarea>
  <button id="save-button">Salvar</button>

  <script>
    // Inicializar o editor de código
    const codeEditor = CodeMirror.fromTextArea(document.getElementById('code-editor'), {
      mode: 'htmlmixed',
      lineNumbers: true,
      theme: 'default'
    });

    // Requisição AJAX para obter o conteúdo do arquivo PHP
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        codeEditor.setValue(xhr.responseText);
      }
    };
    xhr.open('GET', 'ler_arquivo.php', true);
    xhr.send();

    // Requisição AJAX para salvar o conteúdo do <textarea> no servidor
    document.getElementById('save-button').addEventListener('click', function() {
      const senhaCorreta = 'senha123'; // Substitua pela senha correta
      const senhaUsuario = prompt('Digite a senha:');

      if (senhaUsuario === senhaCorreta) {
        const conteudo = codeEditor.getValue();

        const xhrSalvar = new XMLHttpRequest();
        xhrSalvar.onreadystatechange = function() {
          if (xhrSalvar.readyState === 4 && xhrSalvar.status === 200) {
            alert(xhrSalvar.responseText);
          }
        };
        xhrSalvar.open('POST', 'salvar_arquivo.php', true);
        xhrSalvar.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhrSalvar.send('conteudo=' + encodeURIComponent(conteudo));
      } else {
        alert('Senha incorreta. Acesso negado.');
      }
    });
  </script>
</body>
</html>

Neste exemplo, temos:

Um <textarea> com o editor de código usando CodeMirror.
Ao carregar a página, é feita uma requisição AJAX para obter o conteúdo do arquivo PHP (ler_arquivo.php) e exibi-lo no editor.
Ao clicar no botão “Salvar”, o usuário é solicitado a inserir uma senha. Se a senha estiver correta, o conteúdo do editor de código é enviado ao arquivo PHP (salvar_arquivo.php) para ser salvo no servidor.

Lembre-se de criar os arquivos ler_arquivo.php e salvar_arquivo.php no servidor para que o exemplo funcione corretamente. Além disso, configure as permissões de escrita adequadas no diretório em que o arquivo será salvo para que o servidor possa escrever no arquivo corretamente.

Related Posts