Olá a todos os leitores habr. Neste artigo, escreveremos nosso editor de código online.
Por que escrevi meu editor de código on-line
Um dia me perguntei como é difícil criar meu próprio editor on-line como o jsfiddle, e foi por isso que decidi escrever meu próprio editor. Escrever meu editor me deu bons conhecimentos e conceitos de javascript.
Seleção da biblioteca
Escolher uma biblioteca é uma parte importante da criação do seu próprio editor de código. Você pode gerenciar sem uma biblioteca, mas o editor não será tão bonito.
Existem duas bibliotecas populares -
Codemirror e
Ace . Minha escolha caiu em Ace.
Iniciar
A primeira coisa que precisamos fazer é criar e conectar o ás ao nosso arquivo.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head>
Agora precisamos criar uma área de texto e definir estilos para ela. Este código criará área de texto para gerar código html.
<style type="text/css" media="screen"> #html-editor{ min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } </style> <div id="html-editor"></div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div> <br>
A última coisa que resta para nós é adicionar o código js.
var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); htmlEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write(htmlEditor.getValue()); res.close(); } update();
Agora, quando escreveremos o código html nesta área de texto, o resultado será exibido em um iframe.
Funções de cada linha:ace.edit (); É como document.getElementById, mas para ace.
htmlEditor.setTheme () - define o tópico do campo (todos os tópicos podem ser visualizados no github -
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - define o idioma.
htmlEditor.getSession (). on ('alteração', function () {
// código
})
- exibe o código digitado em um iframe.
Vamos adicionar mais 2 campos desse tipo, apenas agora um campo para código css e outro para código javascript.
Código inteiro
index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head> <body> <style type="text/css" media="screen"> #html-editor, #css-editor, #js-editor { min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } .all_editors { display: flex; } </style> <div class="all_editors"> <div id="html-editor"></div> <div id="css-editor"></div> <div id="js-editor"></div> </div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div>
app.js
var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); var cssEditor = ace.edit("css-editor"); cssEditor.setTheme("ace/theme/monokai"); cssEditor.session.setMode("ace/mode/css"); var jsEditor = ace.edit("js-editor"); jsEditor.setTheme("ace/theme/monokai"); jsEditor.session.setMode("ace/mode/javascript"); htmlEditor.getSession().on('change', function() { update(); }) cssEditor.getSession().on('change', function() { update(); }) jsEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write('<style>' + cssEditor.getValue() + '</style>'); res.write('<script>' + jsEditor.getValue() + '</script>'); res.write(htmlEditor.getValue()); res.close(); } update();
Isso termina a primeira parte da criação do seu próprio editor de código.
Na segunda parte, executaremos a função de salvar o código no localStorage e, atualizando a página, esse código será inserido nesses 3 campos, além de fazer o download desse código como um arquivo.
O editor de código que obtemos