Хабрахабр

[Из песочницы] Создание своего jsfiddle, часть 1

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

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

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

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

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

Выбор мой пал на Ace.
Есть две популярные библиотеки — Codemirror и 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 #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 поля, а также сделаем функцию скачивания этого кода в виде файла.

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть