Автор оригинала: Ankit Kumar.
Если вы разработчик, то вы, должно быть, были в среде либо для чтения, либо для записи. Нет сомнений в том, что это сервис мирового класса для блоггеров, а его пользовательский интерфейс является отраслевым стандартом для сайтов блогов.
Индекс –
- Что такое редактор WYSIWYG?
- Внутренняя архитектура редактора.
- Как хранить контент?
Этот блог поможет вам понять, как думать, когда вы хотите создать редактор, каковы строительные блоки и основные правила, на которые вы должны обратить внимание. Я также дал ссылку на свой образец в конце этого блога для вашей справки на случай, если вы где-то застряли или хотите напрямую просмотреть код. Итак, давайте начнем отсюда…
Что такое редактор WYSIWYG?
WYSIWYG-это аббревиатура от “то, что вы видите, – это то, что вы получаете”. Редактор WYSIWYG-это система, в которой содержимое можно редактировать в форме, очень похожей на его внешний вид при печати или отображении в виде готового документа. Как выглядит редактор medium?
Выше приведен скриншот редактора, это чистый и интуитивно понятный интерфейс. Все инструменты редактирования представлены на нижней панели инструментов. Пользователь может вводить свой контент и соответствующим образом форматировать его. Сразу кажется, что это пользовательский редактируемый текст, который использует Spannables для форматирования своего содержимого. Но, используя spannable, было бы трудно управлять форматом длинного текста, такого как 10 тысяч слов. Согласно документам,
Это интерфейс для текста, к которому можно прикреплять и отсоединять объекты разметки. Прикрепите указанный объект разметки к диапазону начало…конец текста.
По сути, spannable выполняет операцию поиска строк от начала до конца индекса, а затем применяет тип интервалов. При каждом изменении символа в редактируемом тексте ему придется обновлять промежутки. Это требует большого количества операций за конечное время, следовательно, это повлияет на производительность рендеринга пользовательского интерфейса и приведет к ужасным последствиям, когда пользователь попытается слишком быстро ввести или удалить какой-либо контент слишком быстро. Поэтому, чтобы убедиться, давайте углубимся и попробуем понаблюдать за “решетками за бетоном”.
Внутренняя архитектура редактора
Рентгеновский снимок редактора
Данная картинка представляет собой среднее приложение, открытое в включенном режиме разработчика. Активный курсор находится внутри поля. Это поле по-прежнему является редактируемым текстом. Теперь давайте посмотрим еще один скриншот, когда мы что-то вводим
При вводе чего-либо, когда мы нажимаем enter, курсор перемещается на новую строку и создается другое поле. Следовательно, мы можем сделать вывод, что это не единый редактируемый текст и промежутки не используются. Если мы продолжим нажимать enter, будут добавлены новые поля. Итак, вот концепция –
Думайте о редакторе как о контейнере, и элементы добавляются/удаляются в/из него на основе действий пользователя (ввод или нажатие назад). Каждый элемент является независимо стилизуемым объектом, может быть выделен жирным шрифтом, H2 или Кавычкой, Изображением или элементом списка и т.д.
Теперь давайте подробнее рассмотрим это,
Основы внутренней архитектуры
Существует родительское представление, которое добавляет представление в вертикальном порядке. В Android это просто может быть расширенная версия линейного отображения в вертикальной ориентации .
Первоначально в стек добавляется редактируемый текст и фокусируется. Пока пользователь не нажмет клавишу enter, содержимое будет отправлено в тот же редактируемый текст.
После нажатия клавиши enter в стек вставляется новый редактируемый текст. Родительское представление отслеживает индексы каждого представления, добавленного в стек, а также представления в фокусе. Взгляните на скелет –
Скелет нашего редактора Я думаю, что внутренний скелет ясен. Теперь давайте рассмотрим часть форматирования.
Основные строительные блоки редактора
В нашем базовом редакторе мы будем поддерживать –
- Стили заголовков, такие как H1, H2… H5
- Жирный шрифт, Курсив
- Блок-цитата
- Изображение
- Упорядоченные/Неупорядоченные списки
- Горизонтальные разделители
Мы можем отсортировать список и классифицировать их по группам, таким как. Группа 1: Стили заголовков, Жирный шрифт, Курсив, Кавычки, Списки Группа 2: Изображения Группа 3: Горизонтальные разделители Здесь мы сгруппировали элементы на основе свойств, необходимых для их отображения. Другими словами, Текст, изображение (мультимедиа) и Горизонтальный разделитель.
Действия, которые мы можем выполнить в группе 1 –
- Мы можем использовать Edittext для ввода.
- Применяйте стили заголовков с помощью шрифтов.
- Показать цитату блока, изменив фоновый вид редактируемого текста.
Следовательно, мы можем создать пользовательский редактируемый текст. В этом представлении будут сохранены все примененные конфигурации. Мы прочитаем их все, пока будем собирать данные редактора (о них будет рассказано позже) и хранить на устройстве или отправлять их на сервер.
Для группы 1: У нас может быть настраиваемое представление со всеми параметрами. Этот блок (представление) будет добавлен или удален из редактора.
Действия, которые мы можем выполнять над группой 2-
- Мы используем ImageView для отображения изображения.
- Подписи к изображениям можно сделать с помощью Edittext.
Это может быть пользовательское представление, состоящее из изображения и редактируемого текста(для подписи к изображению). Он будет отвечать за загрузку изображения на сервер и сохранение самого URL-адреса. Кроме того, ему необходимо сохранить текст, введенный в редактируемый текст .
Для группы 2: У нас может быть пользовательский вид с ImageView и Edittext.
Действия, которые мы можем выполнить в группе 3 –
Это самая простая часть, это будет простой вид, который нарисует линию.
Для группы 3: У нас может быть представление с возможностью рисования линий.
Чтобы сделать редактор стабильным, нам нужно сделать его реакцию подлинной. Итак, есть несколько основных правил, которым необходимо следовать.
Правила работы редактора
- Изначально появится редактируемый текст с наведенным на него курсором.
- Если пользователь вводит абзац и нажимает enter, нам нужно добавить еще одну строку(edittext).
- Если пользователь применяет стиль, он будет применим ко всему содержимому блока.
- Если пользователь помещает курсор в середину текста и нажимает enter, возьмите содержимое после курсора – > Вставьте новый блок – > скопируйте в него содержимое.
- Если пользователь пытается вставить изображение, возьмите индекс текущего сфокусированного вида и вставьте под ним новый блок изображения. Кроме того, вставьте блок редактируемого текста под изображением ( чтобы пользователь мог нажать под изображением и продолжить запись).
- Если пользователь удаляет все содержимое блока, перенесите его в предыдущий блок редактирования.
Это некоторые основные правила из множества правил, которые могут быть применены аналогичным образом.
Как хранить содержимое (текст, изображение…)?
До сих пор мы рассматривали структурную часть редактора. Теперь давайте перейдем к хранению контента. Мы не можем хранить обычный текст и URL-адреса напрямую, потому что для этого требуется много стилей. В этой части будет рассказано о том, как текст должен храниться на сервере и устройстве, а также для его правильного отображения.
Структура Хранения Данных
У нас будет вспомогательный класс, который будет проходить через Родительский контейнер и собирать следующую информацию из каждой группы. Группы, которые мы определили ранее. Из группы 1: тип сущности (текст), текст и стили. Из группы 2: тип объекта (изображение), URL-адрес изображения и текст подписи Из группы 3: тип объекта.
Это одна из структур хранения блогов –
После сбора данных в этом формате мы можем отправить их на сервер или сохранить в виде черновика.
Визуализация данных
Теперь, если пользователь вернется к черновой версии блога, нам нужно прочитать структуру JSON, а затем подготовить представление в соответствии с ней. Вот как это делается –
- Выполните цикл по массиву сущностей в наших данных JSON.
- Создайте экземпляр сущности определенного типа (Текст, изображение или HR) и настройте их с учетом заданных данных.
- Добавьте объект в родительское представление.
- Сосредоточьтесь на первом ребенке.
Теперь мы успешно восстановили структуру черновика из необработанных данных.
Образец репозитория для справки –
Я реализовал версию редактора, которая служит редактором уценки WYSIWYG. В настоящее время он используется в приложении 1 Ramp (приложение для социальных сетей). Вы можете просмотреть исходный код на GitHub . Не стесняйтесь задавать свои сомнения в комментариях.
Оригинал: “https://www.codementor.io/@bxute/how-to-develop-a-wysiwyg-editor-in-android-just-like-medium-robke2a7k”