Делаем свой текстовый редактор с автосохранением
Делаем свой текстовый редактор с автосохранением
Собственный текстовый редактор: делаем красиво Прокачиваем собственный текстовый редактор

Сде­лать соб­ствен­ный тек­сто­вый редак­тор гораз­до про­ще, чем кажет­ся. Сей­час мы соору­дим такой, и вы сами в этом убе­ди­тесь.

В этой ста­тье мы собе­рем тек­сто­вый редак­тор, кото­рый будет рабо­тать в бра­у­зе­ре. В помощь нам три тех­но­ло­гии:

Общая идея

У нас будет HTML-страница, на ней будет блок, похо­жий на лист бума­ги. У него будет вклю­чен content editable, то есть внут­ри это­го бло­ка мож­но будет что-то писать. После каж­до­го нажа­тия кла­ви­ши содер­жи­мое это­го бло­ка будет запи­сы­вать­ся во внут­рен­нюю память бра­у­зе­ра.

Вто­рая часть алго­рит­ма — при загруз­ке стра­ни­цы взять из памя­ти тот текст, что там был рань­ше, и пока­зать его в нашей тек­сто­вой обла­сти. Стра­ни­цу мож­но обнов­лять как угод­но и даже выклю­чать ком­пью­тер — текст всё рав­но оста­нет­ся в памя­ти.

Если запи­сать алго­ритм крат­ко, то он будет выгля­деть так:

  1. Доста­ём из памя­ти тот текст, кото­рый там был
  2. Выво­дим его в нашу область для редак­ти­ро­ва­ния
  3. Посто­ян­но смот­рим, нажа­та ли какая-нибудь кла­ви­ша
  4. Если нажа­та — сра­зу запи­сы­ва­ем изме­не­ния в память.

Пунк­ты 3 и 4 выпол­ня­ют­ся непре­рыв­но до тех пор, пока вы не закро­е­те стра­ни­цу.

Готовим каркас

Пой­дём уже при­выч­ным спо­со­бом и созда­дим новый HTML-файл, в кото­ром будут про­пи­са­ны все нуж­ные бло­ки. Мы так уже дела­ли в ста­тьях про гене­ра­тор паро­лей и спор­тив­ный тай­мер.

    
language: HTML
<!DOCTYPE html>

<html>

<!-- служебная часть -->

<head>

 <!-- заголовок страницы -->

 <title>Текстовый редактор</title>

 <!-- настраиваем служебную информацию для браузеров -->

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->

 <style type="text/css">

 </style>

<!-- закрываем служебную часть страницы -->

</head>

<!-- началось содержимое страницы -->

<body>

   <!-- пишем скрипт, который будет постоянно сохранять наш текст -->

 <script>

 </script>

 

<!-- закончилось содержимое страницы -->

</body>

<!-- конец всего HTML-документа -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Сохра­ня­ем как html-файл, откры­ва­ем его в бра­у­зе­ре и видим пустой экран. Это нор­маль­но, сей­час будем напол­нять.

Расставляем содержимое

Нам нужен толь­ко заго­ло­вок, кото­рый объ­яс­нит нам, где мы нахо­дим­ся, и боль­шое про­стран­ство для вво­да тек­ста. За тек­сто­вое поле будет отве­чать блок <div> со свой­ством contenteditable. Это свой­ство раз­ре­ша­ет редак­ти­ро­вать текст в бло­ке как угод­но.

Раз­ме­стим это в раз­де­ле <body>:

    
language: HTML
<!-- заголовок страницы -->

<h2>Текстовый редактор с автосохранением</h2>

<!-- большой блок для ввода текста: высота в половину, а ширина — во весь экран, назвывается "text_area", обведено рамкой толщиной в 1 пиксель, выравнивание текста — по левому краю -->

<div id="editor" contenteditable="true" style="height: 50%; width: 100%; border: solid; border-width: 1px; text-align: left">

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Настраиваем стили

Сти­ли зада­ют внеш­ний вид стра­ни­цы и любых эле­мен­тов на ней. Сде­ла­ем наш заго­ло­вок опрят­нее:

    
language: CSS
/*задаём общие параметры для всей страницы: шрифт и отступы*/

body{

 text-align: center;

 margin: 10;

 font-family: Verdana, Arial, sans-serif;

 font-size: 16px;

}

/*закончили со стилями*/


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Сохра­ня­ем, обнов­ля­ем и смот­рим на резуль­тат:


Пишем скрипт

Теперь нуж­но научить редак­тор сна­ча­ла извле­кать из памя­ти про­шлый текст, а потом сно­ва запо­ми­нать каж­дое нажа­тие кла­ви­ши. Всё будем делать через localStorage, как с ним рабо­тать — рас­ска­зы­ва­ем в ста­тье про спи­сок задач.

    
language: JavaScript
// если в нашем хранилище уже что-то есть…

if (localStorage.getItem('text_in_editor') !== null) {

 

 // …то отображаем его содержимое в нашем редакторе

 document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor');

 }

      

// отслеживаем каждое нажатие клавиши и при каждом нажатии выполняем команду

document.addEventListener('keydown', function(e) {

   

 // записываем содержимое нашего редактора в хранилище

 localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML);

 });


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Кла­дём это в раз­дел <script> и смот­рим, что полу­чи­лось:


Общий код страницы

    
language: HTML
<!DOCTYPE html>

<html>

<!-- служебная часть -->

<head>

 <!-- заголовок страницы -->

 <title>Текстовый редактор</title>

 

 <!-- настраиваем служебную информацию для браузеров -->

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 

 <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->

 <style type="text/css">

 

   /*задаём общие параметры для всей страницы: шрифт и отступы*/

   body{

     text-align: center;

     margin: 10;

     font-family: Verdana, Arial, sans-serif;

     font-size: 16px;

   }

 /*закончили со стилями*/

 </style>

 

<!-- закрываем служебную часть страницы -->

</head>

 

<!-- началось содержимое страницы -->

<body>

 

 <!-- началась видимая часть -->

 

 <!-- заголовок страницы -->

 <h2>Текстовый редактор с автосохранением</h2>

 

 <!-- большой блок для ввода текста: высота в половину, а ширина — во весь экран, назвывается "text_area", обведено рамкой толщиной в 1 пиксель, выравнивание текста — по левому краю -->

 <div id="editor" contenteditable="true" style="height: 50%; width: 100%; border: solid; border-width: 1px; text-align: left">

 </div>

 

 <!-- закончилась видимая часть -->

 

 <!-- пишем скрипт, который будет постоянно сохранять наш текст -->

 <script>

   

   // если в нашем хранилище уже что-то есть…

   if (localStorage.getItem('text_in_editor') !== null) {

 

       // …то отображаем его содержимое в нашем редакторе

       document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor');

     }

      

   // отслеживаем каждое нажатие клавиши и при каждом нажатии выполняем команду

   document.addEventListener('keydown', function(e) {

   

     // записываем содержимое нашего редактора в хранилище

     localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML);

   });

 

 // закончился скрипт

 </script>

 

<!-- закончилось содержимое страницы -->

</body>

 

<!-- конец всего HTML-документа -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

В следующих сериях

Сде­ла­ем наше­му редак­то­ру при­лич­ный внеш­ний вид — что­бы был похож на лист бума­ги с тенью.

Доба­вим воз­мож­ность менять доку­мен­ты и созда­вать новые.

Доба­вим каж­дой замет­ке заго­ло­вок.

Под­пи­сы­вай­тесь на наши соц­се­ти, и как толь­ко вый­дет новая вер­сия, мы вам рас­ска­жем.