KuroEditor розвивається! За лаштунками нових функцій vol.3
Огляд нових функцій KuroEditor в останній версії! Ми детально пояснюємо особливості, причини їх впровадження та філософію дизайну для полегшення процесу написання статей.
Редактор WYSIWYG «KuroEditor», який наразі є ядром продуктів Kuro-Boo (включаючи відкритий код), продовжує прагнути до надшвидкої роботи на чистому JavaScript без залежностей від фреймворків та інтуїтивно зрозумілого використання. У попередньому «vol.2» ми представили базове форматування тексту, розміщення медіафайлів та таблиці у стилі Dropbox Paper. Проте розвиток KuroEditor не зупиняється. Цього разу ми висвітлюємо функції, додані з того часу, пояснюючи наміри розробників та контекст, щоб розповісти історію, яку ви не знайдете у звичайних посібниках користувача. Пориньте в повну картину «KuroEditor vol.3», розробленого для легкого та багатого вираження ваших думок.
Робота з таблицями: імпорт з Excel та детальне макетування
Однією з функцій, якій було приділено найбільше уваги при розробці KuroEditor, є таблиці. Кожен, хто використовував класичні редактори WYSIWYG, знає, наскільки базовим є їхнє поводження з таблицями. Зміна фону комірки, об'єднання або поділ комірок часто є складними або зовсім недоступними діями.
Організація інформації в акуратних таблицях є незамінною для прояснення порівнянь, тарифів або синтезу даних. Тому KuroEditor пропонує розширені інструменти для управління таблицями з високою точністю.
Основна перевага полягає в автоматичній генерації таблиць шляхом простого копіювання та вставки з Excel, Google Sheets або файлу CSV. Достатньо вставити скопійовані комірки безпосередньо в редактор: KuroEditor аналізує в фоновому режимі формати та миттєво відтворює чисту HTML-таблицю. Це позбавляє від необхідності створювати кожну комірку вручну. Створіть свою таблицю в Excel і вставте її безпосередньо з повною легкістю.
Редактор також дозволяє налаштовувати товщину та колір зовнішніх і внутрішніх меж, або навіть конкретної лінії. Параметри об'єднання (праворуч або знизу), поділу, вертикального вирівнювання та кольору фону комірки керуються інтуїтивно мишкою. Саме ця увага до деталей відрізняє KuroEditor від інших рішень.
Різниця між «Enter» та «Shift+Enter»: структура абзаців
Важливий аспект посібника з KuroEditor стосується різниці між розривом рядка та абзацом. Залежно від того, чи натискаєте ви «Enter» або «Shift + Enter» для переходу на наступний рядок, створена HTML-структура є абсолютно різною. Розуміння цієї різниці є першочерговим для контролю макету.
Натискання «Enter» створює новий абзац (тег <p>), який розглядається як незалежний блок. Оскільки функції вирівнювання або відступу застосовуються до абзацу, ви можете легко вирівняти по правому краю один рядок, якщо він ізольований у власному блоці. Навпаки, «Shift + Enter» вставляє простий розрив рядка (тег <br>) в межах того самого абзацу. Все це розглядається як єдиний блок, і будь-яка зміна відступу вплине на всі пов'язані рядки.
Ця поведінка була розроблена для уникнення мимовільного надмірного інтервалу між рядками, зберігаючи при цьому точний семантичний контроль. Використовуйте «Shift + Enter» для групування коротких рядків, таких як адреси або вірші, і «Enter» для логічних переходів. Це корисно для структурування складних списків без жорстких обмежень форматування.
Ця функція виявляється особливо корисною у списках. У багатьох інструментах, таких як Microsoft Word або Dropbox Paper, можливі нумеровані списки, але часто виникає розчарування, оскільки номери не продовжуються так, як хочеться, або не можна вставити простий текстовий блок між елементами списку. KuroEditor спрощує все це і дозволяє створювати складні списки без зусиль.
«Закруглений блок» для динаміки макету та обтікання тексту
Інтернет-статті часто обмежуються однією вертикальною колонкою, де текст і зображення монотонно чергуються. Хоча вертикальне читання є нормою на мобільних пристроях, цей дизайн може втомлювати на великих екранах. Для вирішення цієї проблеми було створено функцію «Закругленого блоку (kuro-roundbox)».
Цей блок вставляється одним кліком з нижнього меню. Він може містити текст, зображення або таблиці. Спеціальне контекстне меню дозволяє налаштовувати його ширину (від 30 % до 100 %) та вирівнювання (ліворуч, по центру, праворуч).
Основна перевага полягає в обтіканні тексту. При вирівнюванні блоку по правому краю з шириною 45 %, наступний текст природно розміщується ліворуч від нього. Це ідеально для додавання врізок або приміток. Щоб зупинити це обтікання, достатньо вставити горизонтальну лінію (hr), яка переносить наступний вміст під блок. Це додає динаміки та покращує комфорт читання.
«Картки URL» та гарячі клавіші емодзі для прискорення написання
Посилання є незамінними в Інтернеті, але прості сині текстові посилання іноді не виділяються, коли потрібно підкреслити важливе джерело. KuroEditor вирішує цю проблему за допомогою «Карток URL (kuro-url-card)».
При створенні посилання вибір опції картки дозволяє автоматично отримувати метадані цілі (іконку, заголовок, URL) для генерації елегантного візуального блоку. Читач негайно ідентифікує призначення посилання. Якщо цільовий сайт недоступний, редактор акуратно приховує відсутні елементи. На відміну від інших інструментів, таких як Dropbox Paper, які автоматично перетворюють кожне посилання на картку, KuroEditor дозволяє вибирати між класичним посиланням, простою карткою або розширеною карткою.
Щоб не переривати ритм введення, редактор також інтегрує короткі коди для емодзі. Більше не потрібно шукати в меню мишкою: просто введіть :smile:, :fire: або :+1:, щоб код миттєво перетворився на відповідний емодзі. Справжня економія часу для авторів.
Списки завдань та семантичні «Картки рецептів»
KuroEditor також інтегрує практичні функції для особистого використання, такі як списки завдань (Todo), корисні в додатках для нотаток.
- Перевірити пошту
- Приготувати каву
Введення [] на початку рядка генерує прапорець. Стан прапорця зберігається безпосередньо в HTML-коді статті. На публічній сторінці ці прапорці служать фіксованим візуальним елементом і не можуть бути позначені читачами, але вони все одно дуже корисні для структурування посібників або списків контролю.
Для кулінарних блогів редактор пропонує структуровану «Картку рецепту (kuro-recipe)». Вона об'єднує кількість порцій, час приготування, інгредієнти та кроки приготування. Ця картка генерує структуровані дані відповідно до вимог Google SEO для рецептів. Для більшої ясності картка обмежена одним екземпляром на статтю (кнопка стає сірою, якщо картка вже присутня). Щоб дізнатися більше, дивіться статтю про рецепти в KuroCMS.
Оптимізовані блоки коду: перетягування для реорганізації та кнопка копіювання
Для технічних статей відображення коду є критично важливим. KuroEditor полегшує життя розробникам за допомогою інтерактивних блоків коду, розроблених для спрощення написання та читання.
Можна переміщувати блок коду по вертикалі, перетягуючи його за область номерів рядків. Це набагато безпечніше і зручніше, ніж вирізання та вставка тексту, що часто ламає відступи або пошкоджує HTML-структуру.
Крім того, для покращення досвіду читачів спеціальний скрипт автоматично додає кнопку швидкого копіювання (📋) у верхньому правому куті блоків коду на публічних сторінках. Особлива увага, яка спрощує використання фрагментів коду.
Висновок: абсолютна точність WYSIWYG
KuroEditor прагне не лише вирівнювати текст, а й пропонувати повний досвід WYSIWYG, де дизайн під час редагування точно відповідає опублікованій сторінці. Реалізувати це на чистому JavaScript, без фреймворків та компромісів щодо швидкості завантаження, було великим викликом. Завдяки своїй модульній конструкції KuroEditor інтегрується в кілька рядків коду в будь-який CMS. Ми продовжуватимемо працювати над покращенням досвіду для багатьох авторів.