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

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

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

Общая идея

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

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

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

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

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

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

Пой­дём уже при­выч­ным спо­со­бом и созда­дим новый 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>:

<!-- заголовок страницы -->
<h2>Текстовый редактор с автосохранением</h2>
<!-- большой блок для ввода текста: высота в половину, а ширина — во весь экран, назвывается "text_area", обведено рамкой толщиной в 1 пиксель, выравнивание текста — по левому краю -->
<div id="editor" contenteditable="true"
  style="height: 50%; width: 100%; border: solid; border-width: 1px; text-align: left">
</div>

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

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

/*задаём общие параметры для всей страницы: шрифт и отступы*/
body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/*закончили со стилями*/

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

Пишем скрипт

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

// если в нашем хранилище уже что-то есть…
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> и смот­рим, что полу­чи­лось:

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

<!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>

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

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

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

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

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