Описание проекта

Полная документация по K-Editor

Обзор

K-Editor — это WYSIWYG-редактор на основе contentEditable. Цветовая схема — тёмный оливковый + золото.

Редактор работает полностью автономно — все стили, скрипты и иконки локально, без внешних зависимостей. PHP-часть нужна только для сохранения документов на сервере.

Архитектура

┌──────────────────────────────────────────────────────────┐ │ index.html │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Banner — {K} K-Editor / Koshey Developer │ │ │ └─────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Toolbar — кнопки форматирования (execCommand) │ │ │ └─────────────────────────────────────────────────────┘ │ │ ┌──────┬──────────┬──────────┐ │ │ │Editor│ Preview │ HTML │ ← вкладки │ │ ├──────┴──────────┴──────────┤ │ │ │ [contenteditable div] │ ← пользователь пишет │ │ └────────────────────────────┘ │ │ ┌────────────────────────────┐ │ │ │ Status Bar — слова/символы│ │ │ └────────────────────────────┘ │ │ ┌────────────────────────────┐ │ │ │ Сохранить | Очистить | ? │ ← кнопки действия │ │ └────────────────────────────┘ │ │ ┌────────────────────────────┐ │ │ │ Koshey-Developer © 2011 │ ← футер │ │ └────────────────────────────┘ │ └──────────────────────────────────────────────────────────┘ │ ├── css/editor.css ← стили (тёмная тема, 1430 полк) ├── css/icons.css ← иконки toolbar (Unicode, без шрифтов) ├── js/editor.js ← класс KEditor (вся логика) ├── api/save.php ← PHP API сохранения в MySQL ├── demo/index.php ← страница демонстрации └── MySQL: keditor ← база данных (таблица documents)

Структура файлов

Файл Тип Описание
index.html HTML Основной файл редактора. Открыть в браузере — работает сразу без сервера.
docs.html HTML Эта страница — описание проекта и документация.
css/editor.css CSS Все стили: тёмная тема, кнопки, toolbar, модальные окна, адаптивность.
css/icons.css CSS Иконки toolbar через Unicode символы. Без внешних шрифтов.
js/editor.js JS Класс KEditor — вся логика: toolbar, tabs, hotkeys, загрузка файлов, toast, сохранение.
api/save.php PHP Серверная часть. API для сохранения/загрузки/удаления документов в MySQL. Принимает POST (JSON), возвращает JSON.
demo/index.php PHP Серверная часть. Страница демонстрации — рендерит сохранённые HTML-документы в красивую страницу с сайдбаром.
keditor MySQL База данных. Таблица documents создаётся автоматически при первом сохранении.

PHP-файлы (серверная часть)

PHP-файлы нужны только для работы на сервере с поддержкой PHP 7.4+ и модулем pdo_mysql. Без сервера редактор работает автономно — сохраняет в localStorage браузера.

api/save.php

REST API для работы с документами. Поддерживает три метода:

МетодПараметрыОписание
POST { content, title, id? } Сохранить документ. Если id указан — обновить существующий.
GET ?id=N (опционально) Получить документ по ID или список всех документов.
DELETE { id } Удалить документ по ID.

demo/index.php

Страница демонстрации. Загружает документы из MySQL и отображает их в красивом формате:

  • Сайдбар со списком всех документов
  • Основная область с рендерингом HTML-контента
  • Стили в том же стиле что и редактор (тёмный оливковый + золото)
  • Ссылка на редактор для создания новых документов

MySQL база данных

База keditor, таблица documents. Создаётся автоматически. Структура:

CREATE TABLE documents ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255) DEFAULT 'Без названия', content LONGTEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

Как использовать

Без сервера (локально)

Просто откройте index.html в браузере. Всё работает — форматирование, загрузка файлов, предпросмотр. Контент сохраняется в localStorage.

С сервером (PHP + MySQL)

  1. Скопируйте папку keditor на сервер с PHP 7.4+ и MySQL
  2. Убедитесь что модуль pdo_mysql включён в php.ini
  3. Создайте базу данных keditor или используйте существующую (таблица создаётся автоматически)
  4. Отредактируйте данные подключения в api/save.php и demo/index.php (хост, пользователь, пароль, имя базы)
  5. Откройте index.html — при нажатии «Сохранить» данные отправятся на сервер
  6. Откройте demo/index.php — увидите сохранённые документы

Встроить в свой проект

<!-- Подключить стили --> <link rel="stylesheet" href="keditor/css/editor.css"> <link rel="stylesheet" href="keditor/css/icons.css"> <!-- Вставить HTML редактора --> <div class="editor-container"> <div class="toolbar">...</div> <div id="editor" contenteditable="true"></div> </div> <!-- Подключить JS --> <script src="keditor/js/editor.js"></script> <!-- Получить HTML --> <script> const content = window.kEditor.editor.innerHTML; </script>

Горячие клавиши

КлавишаДействие
Ctrl+BЖирный текст
Ctrl+IКурсив
Ctrl+UПодчёркивание
Ctrl+KВставить ссылку
Ctrl+SСохранить документ
Ctrl+ZОтменить
Ctrl+YПовторить
F11Полный экран

Совместимость

Редактор использует стандартные API браузера:

Chrome 90+ Firefox 90+ Safari 14+ Edge 90+

IE11 не поддерживается (CSS Grid, Flexbox, arrow functions).

Вернуться в редактор