Редакторът на код е инструмент, чрез който човек може да пише код и да извършва различни операции. Човек може да пише код във всяко приложение, което поддържа обикновен текст, но редакторът на код е най-подходящ за тази работа. Има безброй редактори на кодове. Тези редактори могат да бъдат персонализирани, за да отговарят на конкретна работна ситуация, език на кодиране и практики. Но всички те имат едно общо нещо, т.е. те се използват за разработване на код.

Има много онлайн редактори на код за браузъри, където можете да пишете код и да го визуализирате. Например w3schools, tutorialspoint и така нататък. Ако говорим за браузъра, кодът, който програмистите са написали, се анализира от браузъра и се представя на посетителя като съдържание.

В тази статия ще създадем приложение, в което потребителят може да напише редактор на код на HTML програма в браузъра и съдържанието му да се показва от другата страна.

Инсталация

Ще стартираме нашето приложение с помощта на CRA. Нека започнем да създаваме нашето приложение.

npx create-react-app my-awesome-app
cd my-awesome-app
yarn start

Можете да отворите http://localhost:3000/, за да видите вашето приложение.

Сега ще създадем нашия редактор. В магазина npm има различни библиотеки за редактори. Ще използваме react-ace. React-ace е библиотека, която съдържа набор от React компоненти за Ace. Ако не сте чували за редактора на Ace, това е вграден кодов редактор, написан на Javascript. Можете лесно да го вградите във всяко уеб приложение или javascript проект.

yarn add react-ace

Сега нека започнем да пишем кода. Ще създадем редактор, който поддържа HTML фрагмент и също така ще има основно автоматично довършване за HTML.

Нека разделим секциите:

Тук, в този раздел, ние импортираме HTML фрагментите, темата Monaki за редактора, която ще се използва по-късно.

import “ace-builds/src-min-noconflict/ext-language_tools”;
import “ace-builds/src-noconflict/mode-html”;
import “ace-builds/src-noconflict/snippets/html”;
import “ace-builds/src-noconflict/theme-monokai”`;

В тази област създаваме препратка, където ще изобразим компилирания изход. Ако има някаква промяна в редактора, onEditorChange get се задейства и резултатът се показва от дясната страна.

............
this.myRef = React.createRef();
this.onEditorChange = this.onEditorChange.bind(this) 
}
onEditorChange(newValue) {   ReactDOM.findDOMNode(this.myRef.current).innerHTML = newValue 
}
.........

По този начин ние вградихме редактора на код в нашето приложение и също така получихме предварителен преглед на неговия резултат.

Бонуси

Би било хубаво, ако можем да показваме грешки в нашия редактор в реално време, за да можем да ги коригираме. За целта можем да използваме линтери . Това е инструмент за идентифициране на грешки, той анализира вашия код за стилистични и програмни грешки спрямо правилата, които познава. Ако част от вашия код нарушава стандартните правила, това може да създаде проблем.

Нека добавим linter в нашето приложение.

const ace = require('ace-builds/src-noconflict/ace');
ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/");
ace.config.setModuleUrl('ace/mode/javascript_worker', "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/worker-javascript.js");

Сега, ако има грешка, ще ви покаже част от хубава описателна информация за грешката.

Нека обобщим нашия код:

Заключение

По този начин можем да вградим редактора react-ace в нашето приложение и да имаме визуализация на резултата. Тук се научаваме да настройваме редактора, научаваме се да активираме различни функции като фрагменти, основно автоматично довършване и също така се научаваме да добавяме линтер, за да анализираме дали кодът следва стандартите или не.

Има много функции, които не са разгледани тук. Ако искате да научите повече за асото, прочетете тук.

Изходен код: https://github.com/sumn2u/realtime-html-server

Визуализация: https://sumn2u.github.io/realtime-html-server/