Bonjour à tous les lecteurs de habr. Dans cet article, nous allons écrire notre éditeur de code en ligne.
Pourquoi ai-je écrit mon éditeur de code en ligne
Un jour, je me suis demandé à quel point il était difficile de créer mon propre éditeur en ligne comme jsfiddle, c'est pourquoi j'ai décidé d'écrire mon propre éditeur. L'écriture de mon éditeur m'a donné une bonne connaissance et des notions de javascript.
Sélection de la bibliothèque
Le choix d'une bibliothèque est une partie importante de la création de votre propre éditeur de code. Vous pouvez gérer sans bibliothèque, mais l'éditeur ne sera pas si beau.
Il existe deux bibliothèques populaires -
Codemirror et
Ace . Mon choix s'est porté sur Ace.
Commencer
La première chose que nous devons faire est de créer et de connecter ace à notre fichier.
<!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>
Nous devons maintenant créer une zone de texte et définir des styles pour cela. Ce code créera une zone de texte pour sortir le code 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>
La dernière chose qui nous reste est d'ajouter du code 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();
Maintenant, lorsque nous écrirons du code html dans cette zone de texte, le résultat sera affiché dans un iframe.
Fonctions de chaque ligne:ace.edit (); Est comme document.getElementById, mais pour ace.
htmlEditor.setTheme () - définit le sujet du champ (tous les sujets peuvent être consultés sur leur github -
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - définit la langue.
htmlEditor.getSession (). on ('change', function () {
// code
})
- affiche le code saisi sur un iframe.
Ajoutons 2 autres champs de ce type, seulement maintenant un champ pour le code CSS et un pour le code javascript.
Code entier
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();
Ceci termine la première partie de la création de votre propre éditeur de code.
Dans la deuxième partie, nous ferons la fonction de sauvegarder le code dans localStorage et en mettant à jour la page ce code sera inséré dans ces 3 champs, et nous ferons également la fonction de télécharger ce code sous forme de fichier.
L'éditeur de code que nous obtenons