Зачем нужен текстовый редактор
Кнопки для создания абзаца и перехода на новую строку
Код файла text_formatting_buttons.js
Текстовый редактор - это весьма важный элемент, позволяющий не только вводить, но и соответствующим образом форматировать (оформлять) большие части текста: например, использовать жирный шрифт, курсив, подчёркивание, выделять цитаты, вводить смайлики и так далее. Для выполнения подобных задач простое текстовое поле input не подходит, так как не имеет таких возможностей, которыми обладает textarea.
Из этой статьи вы узнаете, как создать и оформить простой текстовый редактор с кнопками для создания форматированного текста и передачи его обработчику страницы при помощи формы.
Создание заголовка
Заголовок указывает, для каких целей создаётся данное текстовое поле, что сюда необходимо вводить. Например, для кулинарного рецепта это может быть "Описание рецепта", "Описание шага рецепта" и так далее.
1 <!-- Текстовый редактор -->
2 <!-- Заголовок -->
3 <div class='header_txt'>
4 <h2 class='hdr_txt'><b>Описание рецепта:</b></h2>
5 </div>
В принципе, оборачивать тег h2 в теги div (строки 3 и 5) не обязательно, но в некоторых случаях это может быть полезно.
Кнопки оформления текста
Далее следует блок с кнопками для форматирования текста и вставки смайликов. Эта часть кода использует событие onclick, которое возникает, когда пользователь кликает левой кнопкой мышки по кнопке на сайте. В событии в качестве значения указывается название функции, которую нужно запустить; сама функция прописывается в файле text_formatting_buttons.js (на языке JavaScript), который подключается в самом начале кода страницы (для компонента Joomla см. главу 8, строка 17). Код этого файла рассмотрим в конце данной статьи.
Какие кнопки должны присутствовать в данном блоке определяете вы сами, главное, понять принцип действия всей системы.
6 <!-- Кнопки оформления текста -->
7 <div class='txt_format_btn'>
8 <button type='button' class='btn_f_txt' onclick="TextFormatButton_b('mess_text')">
9 <b>b</b>
10 </button>
Строка 7 создаёт сам блок; помещение всех кнопок в обёртку div позволяет очень удобно управлять расположением всего блока относительно текстового поля.
Строки 8-10 создают кнопку (type='button'), которой присваивается класс (class='btn_f_txt') для оформления внешнего вида, и задаётся событие (onclick); на кнопке выводится надпись "b" (строка 55). При "нажатии" на кнопку (клике левой кнопкой мышки) запускается и выполняется функция TextFormatButton_b , прописанная в файле text_formatting_buttons.js, в результате чего в начале и конце выделенного в текстовом поле текста появятся соответствующие теги (<b> ... </b>). По тому же принципу работают три другие нижеследующие кнопки:
11 <button type='button' class='btn_f_txt' onclick="TextFormatButton_i('mess_text')">
12 <b><i>i</i></b>
13 </button>
14 <button type='button' class='btn_f_txt' onclick="TextFormatButton_u('mess_text')">
15 <b><u>u</u></b>
16 </button>
17 <button type='button' class='btn_f_txt_c' onclick="TextFormatButton_bq('mess_text')">Цитата</button>
Следующие десять кнопок выводят в текстовое поле (туда, где установлен курсор!) смайлики находящиеся в специальной папке smile , вложенной в папку images . При "нажатии" на кнопку (клике левой кнопкой мышки) запускается и выполняется соответствующая функция, прописанная в onclick и в то место, где находится в данный момент курсор, устанавливается код с указанием пути к файлу изображения:
текст <img src="/images/smile/s01.png"> текст
На саму кнопку в данном случае выводится не текст, а изображение, которое находится в папке btn_smile , так же вложенной в папку images .
18 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s01('mess_text')">
19 <img src="/images/btn_smile/s01.png">
20 </button>
21 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s02('mess_text')">
22 <img src="/images/btn_smile/s02.png">
23 </button>
24 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s03('mess_text')">
25 <img src="/images/btn_smile/s03.png">
26 </button>
27 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s04('mess_text')">
28 <img src="/images/btn_smile/s04.png">
29 </button>
30 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s05('mess_text')">
31 <img src="/images/btn_smile/s05.png">
32 </button>
33 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s06('mess_text')">
34 <img src="/images/btn_smile/s06.png">
35 </button>
36 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s07('mess_text')">
37 <img src="/images/btn_smile/s07.png">
38 </button>
39 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s08('mess_text')">
40 <img src="/images/btn_smile/s08.png">
41 </button>
42 <button type='button' class='btn_f_txt' onclick="TextFormatButton_sChGreen('mess_text')">
43 <img src="/images/btn_smile/chBg.png">
44 </button>
45 <button type='button' class='btn_f_txt' onclick="TextFormatButton_sChRed('mess_text')">
46 <img src="/images/btn_smile/chBred.png">
47 </button>
48 </div>
Обратите внимание: место расположения файлов изображений вы можете выбрать любое другое; например, в некоторых случаях будет правильнее расположить основную папку images внутри самого компонента (CMS Joomla).
Текстовое поле
49 <!-- Текстовое поле -->
50 <div class='text_area'>
51 <textarea name='mess_text' id="mess_text" class='area_mess_txt' maxlength='5000' required placeholder='Введите текст (не более 5000 символов)'></textarea>
52 </div>
В текстовое поле пользователь может вводить, редактировать и форматировать текст. Для удобства оформления и позиционирования текстовое поле находится внутри блока div (строки 50-52). Для самого поля установлено имя (name), позволяющее обработчику идентифицировать его, установлен id для привязки к функциям JavaScript и присвоен class для настройки внешнего вида в таблицах CSS. Атрибут maxlength устанавливает максимально возможное количество символов, а placeholder выводит указанный текст-подсказку в пустое поле (исчезает после введения любого символа). Атрибут required указывает браузеру пользователя, что нельзя отправлять форму если в поле не введены данные. При необходимости можно так же добавить атрибут minlength, указывающий минимальное количество символов; в этом случае форма не будет отправлена на сервер, если количество введённых знаков окажется меньше.
Кнопки для создания абзаца и перехода на новую строку
Текстовое поле textarea имеет важную особенность: оно не передаёт в форму (тег form) переносы строки, сделанные при помощи кнопки Enter. В некоторых случаях это может происходить, но что бы избежать проблем, лучше создать в блоке две дополнительные кнопки, первая из которых ("А") будет создавать новый абзац, другая ("br") - просто начинать последующий текст с новой строки. Кроме того, абзацы обычно разделяются чуть бóльшими интервалами, чем строки, что позволяет более комфортно воспринимать написанный текст.
Принцип использования кнопки "А" такой же, как и у кнопок "b" или "i": необходимо выделить нужную чать текста, нажать кнопку и система выставит соответствующие теги в начале и в конце. Кнопка "br" просто устанавливает одноимённый тег в том месте, где находится в данный момент курсор.
Код данных кнопок выглядит так:
1 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s01('mess_text')">
2 <b>A</b>
3 </button>
4 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s02('mess_text')">
5 <b>br</b>
6 </button>
Код файла text_formatting_buttons.js
Данный файл обрабатывает запросы после нажатия кнопок для форматирования текста и вносит соответствующие изменения в текст; обычно такой файл располагают в отдельной папке в корне сайта или какого-либо компонента, а в скрипте страницы подключают в самом начале.
Файл text_formatting_buttons.js представляет из себя скрипт на JavaScript, состоящий из простого набора функций, каждая из которых запускается в соответствии с нажатой кнопкой. Вы можете использовать любой набор данных функций.
Функция для кнопки "b" (жирный шрифт)
1 function TextFormatButton_b(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<b>' + sel + '</b>';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
Функция для кнопки "i" (наклонный шрифт)
1 function TextFormatButton_i(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<b>' + sel + '</b>';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
Функция для кнопки "u" (подчёркнутый шрифт)
1 function TextFormatButton_u(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<b>' + sel + '</b>';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
Функция для кнопки "A" (выделение текста в абзац)
1 function TextFormatButton_a(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<p>' + sel + '</p>';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
Функция для кнопки "br" (переход на новую строку)
1 function TextFormatButton_a(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<br>';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
Функция для вставки смайлика или символа*
1 function TextFormatButton_a(ta) {
2 var textarea = document.getElementById(ta);
3 var len = textarea.value.length,
4 start = textarea.selectionStart,
5 end = textarea.selectionEnd,
6 sel=textarea.value.substring(start, end),
7 replace = '<img src="/images/smile/s01.png">';
8 textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
9 }
*В строке 7 следует указать путь к файлу с изображением смайлика или символа.
Уважаемые пользователи!
Любой труд всегда должен быть вознаграждён. Создание качественных, простых в восприятии учебных материалов, статей и справочников - это большой труд, требующий не малого количества времени, а иногда и финансовых затрат. Мы будем рады поддержке авторов, пожертвуйте небольшую сумму (по вашему усмотрению) на дальнейшее развитие этого проекта!
