Делаем свой текстовый редактор с автосохранением
vk f t

Делаем свой текстовый редактор с автосохранением

Это не так сложно, как звучит

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

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

Общая идея

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

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

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

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

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

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

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

    
language: 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
<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>


Скопировать код

Код скопирован

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

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

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

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

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

Ещё по теме