Привет всем читателем habr. В данной статье мы напишем свой онлайн редактор кода.

Зачем я писал свой онлайн редактор кода


В один день мне стало интересно насколько сложно создать свой онлайн редактор по типу jsfiddle, из-за чего я решил написать свой редактор. Написание своего редактора дало мне хорошие знания и понятия javascript'а.

Выбор библиотеки


Выбор библиотеки является важной составляющей создании своего редактора кода. Можно справиться и без библиотеки, но тогда редактор будет не таким красивым.

Есть две популярные библиотеки — Codemirror и Ace. Выбор мой пал на Ace.

Начало


Первое, что нам надо сделать — это создать и подключить ace к нашему файлу. 

<!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>

Теперь нам нужно создать textarea и задать ему стили. Этот код создаст textarea для вывода 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>

Последнее, что нам осталось — это добавить 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();

Теперь, когда мы будет писать html код в этой textarea, результат будет выводится в iframe.

Функции каждой строки:

ace.edit(); — это, как document.getElementById, но для ace.
htmlEditor.setTheme() — определяет тему поля (все темы можно посмотреть у них на github — https://github.com/ajaxorg/ace)
htmlEditor.session.setMode() — определяет язык.
htmlEditor.getSession().on('change', function() {
// код
})
 — отображает введенный код на iframe.

Давайте добавим еще 2 таких поля, только теперь одно поле для css кода и одно для javascript кода.

Весь код


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();

На этом первая часть по созданию своего редактора кода заканчиваеться.

Во второй части мы сделаем функцию сохранения кода в localStorage и по обновлению страницы этот код будет вставляться в эти 3 поля, а также сделаем функцию скачивания этого кода в виде файла.

Редактор кода, который у нас получится