Текстовый редактор является неотъемлемой частью многих сайтов. Конечно, можно просто создать обычное текстовое поле, которого будет вполне достаточно для выполнения главной функции - введения текста, но гораздо интереснее и приятнее работать с редактором, позволяющем не просто вводить символы, но и оформлять их (курсив, толстый шрифт, подчёркивание), выделять цитаты, вводить смайлики и так далее.
Создание заголовка
47 <!-- Текстовый редактор -->
48 <!-- Заголовок -->
49 <div class='txt_step'>
50 <h2 class='hdr_sel'><b>Текст обращения:</b></h2>
51 </div>
Кнопки оформления текста
Эта часть кода использует событие onclick, которое возникает, когда пользователь кликает левой кнопкой мышки по кнопке. В событии в качестве значения указывается название функции, которую нужно запустить; сама функция прописана в файле text_formatting_buttons.js (на языке JavaScript), который был подключен в строке 17 (см. главу 8).
52 <!-- Кнопки оформления текста -->
53 <div class='txt_format_btn'>
54 <button type='button' class='btn_f_txt' onclick="TextFormatButton_b('mess_text')">
55 <b>b</b>
56 </button>
Строка 54 создаёт кнопку (type='button'), которой присваивается класс (class='btn_f_txt') для оформления внешнего вида, и задаётся событие (onclick); на кнопке выводится надпись "b" (строка 55). При "нажатии" на кнопку (клике левой мышкой) запускается и выполняется функция TextFormatButton_b , прописанная в файле text_formatting_buttons.js, в результате чего в начале и конце выделенного в текстовом поле текста появятся соответствующие теги (<b> ... </b>). По тому же принципу работают три другие нижеследующие кнопки:
57 <button type='button' class='btn_f_txt' onclick="TextFormatButton_i('mess_text')">
58 <b><i>i</i></b>
59 </button>
60 <button type='button' class='btn_f_txt' onclick="TextFormatButton_u('mess_text')">
61 <b><u>u</u></b>
62 </button>
63 <button type='button' class='btn_f_txt_c' onclick="TextFormatButton_bq('mess_text')">Цитата</button>
Следующие 10 кнопок выводят в текстовое поле (туда, где установлен курсор) смайлики (маленькие рисунки). Принцип остаётся тот же, но на саму кнопку выводится не текст, а изображение, которое находится в папке smile , расположенной внутри папки шаблонов компонента views . Так как эта папка ещё не создавалась, её нужно создать, а затем распаковать в неё архив smile.zip (кнопка ниже):
OSPanel > OpenServer > domains > ваш_сайт > components > com_feedback_form > views > smile
41 Скачать файл вы можете 
3
* Загрузка возможна только для зарегистрированных пользователей!
64 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s01('mess_text')">
65 <img src="components/com_feedback_form/views/smile/s01.png">
66 </button>
67 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s02('mess_text')">
68 <img src="components/com_feedback_form/views/smile/s02.png">
69 </button>
70 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s03('mess_text')">
71 <img src="components/com_feedback_form/views/smile/s03.png">
72 </button>
73 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s04('mess_text')">
74 <img src="components/com_feedback_form/views/smile/s04.png">
75 </button>
76 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s05('mess_text')">
77 <img src="components/com_feedback_form/views/smile/s05.png">
78 </button>
79 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s06('mess_text')">
80 <img src="components/com_feedback_form/views/smile/s06.png">
81 </button>
82 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s07('mess_text')">
83 <img src="components/com_feedback_form/views/smile/s07.png">
84 </button>
85 <button type='button' class='btn_f_txt' onclick="TextFormatButton_s08('mess_text')">
86 <img src="components/com_feedback_form/views/smile/s08.png">
87 </button>
88 <button type='button' class='btn_f_txt' onclick="TextFormatButton_sChGreen('mess_text')">
89 <img src="components/com_feedback_form/views/smile/chBg.png">
90 </button>
91 <button type='button' class='btn_f_txt' onclick="TextFormatButton_sChRed('mess_text')">
92 <img src="components/com_feedback_form/views/smile/chBred.png">
93 </button>
94 </div>
Текстовое поле
95 <!-- Текстовое поле -->
96 <div class='txt_step_2'>
97 <textarea name='mess_text' id="mess_text" class='area_mess_txt' maxlength='5000' required placeholder='Введите текст обращения (не более 5000 символов)'></textarea>
98 </div>
В текстовое поле пользователь может вводить и редактировать текст. Для удобства оформления и позиционирования текстовое поле находится внутри блока div. Для самого поля установлено имя (name), позволяющее обработчику идентифицировать его, установлен id и присвоен class для настройки внешнего вида в таблицах CSS. Атрибут maxlength устанавливает максимально возможное количество символов, а placeholder выводит указанный текст в пустое поле (исчезает после введения любого символа). Атрибут required указывает браузеру пользователя, что нельзя отправлять форму если в поле не введены данные. При необходимости можно так же добавить атрибут minlength, указывающий минимальное количество символов; в этом случае форма не будет отправлена на сервер, если количество введённых знаков окажется меньше.
Пропишите указанный код в создаваемом файле, сохраните, перейдите на сайт и перезагрузите страницу. При необходимости настройте вид созданного элемента.
После проверки и настройки можно переходить к полям для ввода изображений.
