Creating your own jsfiddle part 1
Hello to all habr. In this article we will write your online code editor.
One day I wondered how difficult it was to create my online editor like jsfiddle, which is why I decided to write my own editor. Writing my editor gave me good knowledge and javascript concepts.
Choosing a library is an important part of creating your own code editor. You can cope without a library, but then the editor will not be so beautiful.
There are two popular libraries - Codemirror and Ace . My choice fell on Ace.
The first thing we need to do is create and connect ace to our file.
Now we need to create a textarea and give it styles. This code will create a textarea to output the html code.
The last thing left for us is to add js code.
Now, when we write html code in this textarea, the result will be displayed in the iframe.
Functions of each line:
ace.edit (); Is like document.getElementById, but for ace.
htmlEditor.setTheme () - defines the topic of the field (all the topics can be viewed on github - https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - defines the language.
htmlEditor.getSession (). on ('change', function () {
// code
})
- Displays the entered code on the iframe.
Let's add 2 more such fields, only now one field for css code and one for javascript code.
index.php
app.js
On it the first part on creation of the editor of a code comes to an end.
In the second part, we will make the function of saving the code in localStorage and upon updating the page this code will be inserted into these 3 fields, and also we will make the function of downloading this code as a file.
Code editor that we get
Why did I write my online code editor
One day I wondered how difficult it was to create my online editor like jsfiddle, which is why I decided to write my own editor. Writing my editor gave me good knowledge and javascript concepts.
Library selection
Choosing a library is an important part of creating your own code editor. You can cope without a library, but then the editor will not be so beautiful.
There are two popular libraries - Codemirror and Ace . My choice fell on Ace.
Start
The first thing we need to do is create and connect ace to our file.
<!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> Now we need to create a textarea and give it styles. This code will create a textarea to output the 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> The last thing left for us is to add 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(); Now, when we write html code in this textarea, the result will be displayed in the iframe.
Functions of each line:
ace.edit (); Is like document.getElementById, but for ace.
htmlEditor.setTheme () - defines the topic of the field (all the topics can be viewed on github - https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - defines the language.
htmlEditor.getSession (). on ('change', function () {
// code
})
- Displays the entered code on the iframe.
Let's add 2 more such fields, only now one field for css code and one for javascript code.
All 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(); On it the first part on creation of the editor of a code comes to an end.
In the second part, we will make the function of saving the code in localStorage and upon updating the page this code will be inserted into these 3 fields, and also we will make the function of downloading this code as a file.
Code editor that we get
Source: https://habr.com/ru/post/436764/