Презентовано! Мета, функції та пристрій KuroEditor vol.2

Політика розробки

Оскільки цей інструмент створюється для KuroCMS, я намагався забезпечити максимальну універсальність, залишаючись вірним суті. Редактор WYSIWYG є обов'язковим, побудованим на чистому Vanilla JS. Він має працювати надзвичайно швидко, без жодних фреймворків. Я уникав суворої концепції headless-редактора, щоб зберегти слабке зв'язування компонентів. Якщо викликаюча сторона не вказує @layer, редактор може підлаштовуватися під її макет кнопок для візуальної єдності — хоча в KuroCMS я це не використовуватиму! лол.

CSS використовує лише Tailwind та внутрішні стилі KuroEditor. Поведінка таблиць аналогічна Dropbox Paper. Поки що, навіть якщо інтерфейс не відшліфований до ідеалу, я віддаю пріоритет випуску готового продукту перед дрібними коригуваннями, якщо це не заважає користуванню. Зрештою, робота не почнеться, поки проект не буде завершено. Я випущу його, як тільки він стане прийнятним для використання.

Детальні технічні характеристики

Описувати детальні технічні характеристики текстом у блозі буває нудно, тому я продемонструю їх за допомогою зображень.

Як показано на малюнку, у верхньому меню KuroEditor є два режими перегляду: попередній перегляд та HTML. Проте я очікую, що більшість не використовуватиме режим HTML. Він призначений для тих, хто хоче прописати в HTML те, що ще не реалізовано в KuroEditor, або перевірити внутрішню роботу інструменту.

Далі йдуть іконки для емодзі, створення таблиці, медіафайлів, коду, горизонтальних ліній, автозбереження, збереження та змісту. Основні медіафайли можна перетягнути мишею безпосередньо у позицію курсору, тому кнопка на панелі використовується рідко.

Базове оформлення тексту

Панель інструментів для оформлення тексту та поточного рядка з’являється при виділенні хоча б одного символу. Це відповідає концепції прихованих меню для мінімізації рухів миші.

Зліва направо: напівжирний, курсив, підкреслений, закреслений. Далі йдуть налаштування заголовків h1, h2 тощо. Після них — блок цитат та вікно сповіщення. Потім колір тексту, розмір шрифту, висота рядка, вирівнювання (ліворуч, по центру, праворуч, по ширині), маркери списку та нумерація. (До речі, натискання клавіші Tab автоматично створює новий абзац). *У нових версіях також можна вибирати сімейства шрифтів.

Таблиці — головний пріоритет

Можливості роботи з таблицями — це гордість KuroEditor. Додавання рядків або стовпчиків організовано як у Dropbox Paper: коли курсор миші знаходиться поруч із межею, з’являється кнопка '+'. Натискання на неї додає рядок чи стовпчик. Видалення здійснюється червоною кнопкою '-' праворуч від рядка або внизу стовпчика. Керувати таблицями неймовірно просто. Об’єднання та розділення комірок виконується в один клік. Ви можете налаштувати товщину та колір меж через контекстне меню.

Гнучке розміщення медіавмісту

Вбудовування медіафайлів є повністю вільним. Воно не обмежується лише зображеннями з вашого сервера; ви можете легко вставляти посилання на YouTube для створення музичних чартів чи списків цікавих відео. Якщо ви вводите URL вручну, конструкція [[ url ]] автоматично розгорнеться у відповідне відео чи зображення.

Використання змісту

Структурування довгих документів (романів, контрактів) полегшується використанням h1, h2 тощо. Завдяки змісту у верхньому меню ви завжди бачите прогрес написання навіть у дуже великих файлах.

Інтеграція в інші системи

Нарешті, інтеграція редактора є надзвичайно простою. Достатньо вставити один рядок коду в потрібне місце та визначити функції зворотного виклику для збереження. Дані передаються у форматі HTML. У KuroCMS цей HTML записується та зберігається як вміст статті. Докладніші відомості наведено за посиланням нижче. Оскільки точок зв'язку дуже мало, редактор легко впроваджується в будь-яку систему.

Висновок

Японці дуже люблять табличні структури (так само, як японські будинки люблять перегородки! лол). Однак у багатьох іноземних редакторах робота з таблицями реалізована погано і бракує візуального налаштування. Мене особливо дивує, чому об’єднання комірок є такою рідкісною функцією. Сподіваюся, KuroEditor стане комусь у пригоді.

Репозиторій коду на GitHub: https://github.com/Kuro-Boo/KuroEditor
Сторінка опису KuroEditor: https://kuro.boo/kuroeditor/
Демо-сторінка тестування KuroEditor: https://kuro.boo/kuroeditor/sample/