Текстовый редактор для поля описания домашнего задания

Этот раздел описывает все функции для текстового редактора.

осторожно

Дополнительные функции будут отображаться в личном кабинете согласно дизайну только в блоке описания домашнего задания в ЛМС! Все функции текстового редактора будут отображаться во всем проекте в ЛМС, но новые функции будут работать только в дз.

Чтобы пользоваться редактором с новыми функциями нужно зайти в ЛМС в любую программу, в любой урок программы и дойти до раздела "Контент", до блока "Описание" Если хотите изменить стиль какой-то строки, абзаца или слова их нужно выделить

Функции редактора:

1. 
   Начертание текста. Функции для редактирования начертания: жирный, курсив, подчеркнутый (соответственно)

Результат:
Жирный текст

Подчеркнутый текст

Курсив

2. 
   Заливка текста,заливка фона. Библиотека цветов предоставлена дизайнерами, меняется разработчиком. Чтобы сменить цвет текста или фона текста, нужно выделить его и, нажав на иконки цвета или фона, выбрать цвет или фон.

Результат:

3. 
   Вставка картинки. Вставляется в формате base64, в личном кабинете заданы стили, чтобы картинка вставлялась в размере, не портящем вид описания

Результат:

4. 
   Блок цитаты. В личном кабинете заданы стили, чтобы блок цитат был оформлен под нужды проекта. Чтобы сделать текст цитатой, нужно выделить его и нажать на иконку цитаты

Результат:

5. 
   Блок кода. Используется если нужно оформить текст как блок кода, или вставить кусок кода как текст для примера нужно выделить нужный текст и нажать на иконку кода. В личном кабинете заданы стили блока кода под нужды проекта.

Результат:

6. 
   Вставка ссылки. Чтобы вставить ссылку на текст в описании нужно выделить его (текст), нажать на иконку ссылки, в открывшемся окне вставить ссылку и нажать сохранить

7. 
   Нумерованный, ненумерованный список. Редактор кода позволяет вставлять нумерованные и ненумерованные списки. Чтобы начать писать такой список, нужно нажать на иконку нужного вам списка и начать писать текст. При переносе строки в тексте автоматически будет вставляться либо порядковый номер строки, либо обезличенный кружок
   В личном кабинете эти списки оформлены под нужды проекта

Результат:

8. 
   Редактор позволяет вставлять в текст sub и super, это специальный символ для записи текста над текстом и под текстом, чтобы оформить текст так, нужно выделить его (текст), нажать на нужную иконку и написать текст, он автоматически вставиться либо снизу, либо сверху

Результат:

9. 
   С помощью этой функции вы можете двигать текст на 8 шагов. В личном кабинете при этом тексту добавиться отступ в 10px при одном отступе и еще 10 при каждом новом

Результат:

10. 
    Редактирование размера текста. Вы можете оформить размер текста через эту функцию. В личном кабинете каждый хединг имеет свой размер букв h1(1 в редакторе) - самый большой, h4(4 в редакторе) - самый маленький

11. 
    Через эту функцию вы можете выравнять текст по центру, с левого края, с правого края. Чтобы выравнять текст вам нужно его выделить и, нажав на иконку выбрать нужное выравнивание

12. 
    Очистка стилей. Если вы хотите очистить текст или часть текста от стилей вы можете выделить весь текст или нужную вам часть и нажав на функцию очистки очистить все выбранные стили. Если вы случайно отчистили стили, кнопками control + z можно вернуть текст как было (работает во всем редакторе ри любом изменении)

Таблица спец символов:

https://geekboards.ru/page/alt-codes

Для разработчика

Документация React-quill:
https://quilljs.com/docs/modules/

Компонент - TextEditor

Для тестировщика

При тестировании важно знать, что стили в ЛМС в редакторе не равны стилям в личном кабинете. Редактор предоставляет библиотеку и при форматировании текста навешивает на него либо inline-стили, либо классы, которые мы в свою очередь, обрабатываем в личном кабинете и ставим им верстку, которая нужна нам.

Поэтому, чтобы понять, сработало ли форматирование, нужно сохранить урок и посмотреть его форматирование в личном кабинете.