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

habr.png

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

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


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

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


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

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

Начало


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




        
Онлайн редактор кода


Теперь нам нужно создать textarea и задать ему стили. Этот код создаст textarea для вывода html кода.


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




        
Онлайн редактор кода


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('');
res.write('');
res.write(htmlEditor.getValue());
res.close();
}
update();


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

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

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

© Habrahabr.ru