Hola a todos los lectores habr. En este artículo escribiremos nuestro editor de código en línea.
¿Por qué escribí mi editor de código en línea?
Un día me pregunté lo difícil que es crear mi propio editor en línea como jsfiddle, razón por la cual decidí escribir mi propio editor. Escribir mi editor me dio buenos conocimientos y conceptos de JavaScript.
Selección de biblioteca
Elegir una biblioteca es una parte importante de la creación de su propio editor de código. Puede administrar sin una biblioteca, pero el editor no será tan hermoso.
Hay dos bibliotecas populares:
Codemirror y
Ace . Mi elección recayó en Ace.
Inicio
Lo primero que debemos hacer es crear y conectar as a nuestro archivo.
<!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>
Ahora necesitamos crear textarea y establecer estilos para ello. Este código creará textarea para generar el 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>
Lo último que nos queda es agregar el 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();
Ahora, cuando escribiremos código html en este área de texto, el resultado se mostrará en un iframe.
Funciones de cada línea:ace.edit (); Es como document.getElementById, pero para as.
htmlEditor.setTheme () : define el tema del campo (todos los temas se pueden ver en su github:
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () : define el idioma.
htmlEditor.getSession (). on ('change', function () {
// código
})
- muestra el código ingresado en un iframe.
Agreguemos 2 campos más, solo un campo para el código CSS y otro para el código JavaScript.
Código completo
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();
Esto finaliza la primera parte de la creación de su propio editor de código.
En la segunda parte, haremos la función de guardar el código en localStorage y, al actualizar la página, este código se insertará en estos 3 campos, y también haremos la función de descargar este código como un archivo.
El editor de código que obtenemos