O Monaco Editor é uma ferramenta poderosa para edição de códigos, amplamente utilizada por sua robustez e funcionalidade, como auto-completar, destaques de sintaxe e muito mais. Este guia completo ensina como integrá-lo a um <textarea> para salvar conteúdos no banco de dados ou arquivos, garantindo simplicidade e eficácia.
Passo 1: Configurando o HTML com Monaco Editor
Aqui está um exemplo de código HTML que integra o Monaco Editor e sincroniza o conteúdo com um <textarea> invisível. Isso permite que o conteúdo editado seja enviado pelo formulário ao backend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monaco Editor with Textarea</title>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script>
<style>
#editor {
width: 100%;
height: 400px;
border: 1px solid #ddd;
}
textarea {
display: none; /* Oculta o textarea */
}
</style>
</head>
<body>
<h1>Monaco Editor with Textarea</h1>
<!-- Textarea para enviar os dados -->
<form action="/save" method="POST">
<textarea id="codeArea" name="code"></textarea>
<div id="editor"></div>
<button type="submit">Save</button>
</form>
<script>
require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
const editor = monaco.editor.create(document.getElementById('editor'), {
value: "// Your code here\nconsole.log('Hello, world!');",
language: 'javascript',
theme: 'vs-dark'
});
// Sincronizar o conteúdo do editor com o textarea ao enviar o formulário
const textarea = document.getElementById('codeArea');
document.querySelector('form').addEventListener('submit', () => {
textarea.value = editor.getValue(); // Copia o valor do editor para o textarea
});
});
</script>
</body>
</html>Passo 2: Backend Simples para Salvar os Dados
Abaixo está um exemplo de backend usando PHP, que salva o código enviado pelo formulário em um arquivo:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$code = $_POST['code']; // Obtém o conteúdo do textarea
// Salva o código em um arquivo
file_put_contents('code.txt', $code);
// Retorna uma mensagem de confirmação
echo "Código salvo com sucesso: <pre>" . htmlspecialchars($code) . "</pre>";
}
?>Testando a Solução
- Copie o código HTML e salve-o em um arquivo (por exemplo,
index.html). - Configure um servidor local (como XAMPP ou outro) e salve o arquivo PHP no mesmo diretório do HTML.
- Abra o
index.htmlno navegador, escreva códigos no editor e clique em Save. - Verifique o conteúdo do arquivo
code.txtpara confirmar que o código foi salvo corretamente.
Benefícios dessa Abordagem
- Flexibilidade: O
<textarea>invisível permite enviar o conteúdo com facilidade para o backend. - Compatibilidade: Funciona com qualquer linguagem de backend (PHP, Node.js, Python, etc.).
- Expansível: Pode ser adaptado para salvar em bancos de dados ou APIs.
Dicas Extras
- Certifique-se de que o backend esteja configurado para lidar com caracteres especiais, como aspas e acentos.
- Garanta que o banco de dados suporte o tamanho do código armazenado (ex.: campos
TEXTouLONGTEXTno MySQL). - Explore outros temas do Monaco Editor ou ajuste o idioma conforme suas necessidades.