Привет всем читателем 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 поля, а также сделаем функцию скачивания этого кода в виде файла.
Редактор кода, который у нас получится
Автор: Rapprogtrain
