Hallo an alle habr leser. In diesem Artikel schreiben wir unseren Online-Code-Editor.
Warum habe ich meinen Online-Code-Editor geschrieben?
Eines Tages fragte ich mich, wie schwierig es ist, einen eigenen Online-Editor wie jsfiddle zu erstellen. Deshalb habe ich beschlossen, einen eigenen Editor zu schreiben. Das Schreiben meines Herausgebers gab mir gute Kenntnisse und Konzepte von Javascript.
Bibliotheksauswahl
Die Auswahl einer Bibliothek ist ein wichtiger Bestandteil beim Erstellen eines eigenen Code-Editors. Sie können ohne Bibliothek auskommen, aber dann wird der Editor nicht so schön sein.
Es gibt zwei beliebte Bibliotheken -
Codemirror und
Ace . Meine Wahl fiel auf Ace.
Starten Sie
Als erstes müssen wir ein Ass erstellen und mit unserer Datei verbinden.
<!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>
Jetzt müssen wir einen Textbereich erstellen und Stile dafür festlegen. Dieser Code erstellt einen Textbereich zur Ausgabe von HTML-Code.
<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>
Das Letzte, was uns noch bleibt, ist das Hinzufügen von js-Code.
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();
Wenn wir nun HTML-Code in diesen Textbereich schreiben, wird das Ergebnis in einem Iframe angezeigt.
Funktionen jeder Zeile:ace.edit (); Ist wie document.getElementById, aber für Ass.
htmlEditor.setTheme () - definiert das Thema des Feldes (alle Themen können auf ihrem Github angezeigt werden -
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - definiert die Sprache.
htmlEditor.getSession (). on ('change', function () {
// Code
})
- Zeigt den eingegebenen Code auf einem Iframe an.
Fügen wir zwei weitere solche Felder hinzu, nur jetzt ein Feld für CSS-Code und eines für Javascript-Code.
Ganzer Code
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();
Damit ist der erste Teil der Erstellung eines eigenen Code-Editors abgeschlossen.
Im zweiten Teil werden wir die Funktion zum Speichern des Codes in localStorage übernehmen und durch Aktualisieren der Seite wird dieser Code in diese 3 Felder eingefügt, und wir werden auch die Funktion zum Herunterladen dieses Codes als Datei übernehmen.
Der Code-Editor, den wir bekommen