Repolode
Предложить
panphora

panphora/overtype

Лёгкий редактор Markdown на JavaScript: невидимая текстовая область накладывается на стилизованный предпросмотр, есть необязательная панель инструментов, зависимости от фреймворков нет.

Открыть на GitHub
Звёзды
3,703
Форки
92
Открытые issues
6
Последний коммит
13 дней назад

Что это?

OverType — библиотека для редактирования Markdown, которая принимает ввод через обычный textarea и отображает под ним стилизованный предпросмотр. Текстовая область прозрачная, а предпросмотр использует такую же моноширинную раскладку, поэтому вводимый текст совпадает по позиции с отображаемым результатом, а символы синтаксиса Markdown остаются видимыми.

Библиотека поставляется одним минифицированным бандлом размером около 134 КБ и не имеет зависимостей во время выполнения. Её можно подключить через npm в форматах ESM или CommonJS, через CDN как ES-модуль или глобальный скрипт, а также использовать как нативный Web Component. В комплект входят необязательная панель форматирования, глобальные темы Solar и Cave и темы для отдельных экземпляров, автоматическое продолжение списков, отображение списков задач, панель статистики и хуки загрузки файлов при вставке и перетаскивании.

Редактор предоставляет методы для получения и установки содержимого, переключения между режимами редактирования, обычного textarea и предпросмотра, а также экспорта чистого HTML. Для использования на сервере или в расширениях доступен отдельный парсер Markdown. Изображения не отображаются; для сохранения выравнивания весь текст должен использовать моноширинный шрифт одного размера.

Ключевые возможности

  • 01Невидимая текстовая область накладывается на стилизованный предпросмотр, поэтому вводимый текст выравнивается с ним.
  • 02Необязательная панель инструментов с кнопками для полужирного и курсивного начертания, кода, ссылок, заголовков, списков, списков задач и цитат.
  • 03Сочетания клавиш, например Cmd/Ctrl+B и Cmd/Ctrl+K, а также продолжение списков в стиле GitHub.
  • 04Темы Solar и Cave и поддержка пользовательских цветовых тем.
  • 05Экспорт чистого или отрисованного HTML и отдельный парсер Markdown.
  • 06Доступен как пакет npm, скрипт CDN или Web Component.

Сценарии использования

  • Добавление лёгкого ввода Markdown в веб-форму или поле комментария без этапа сборки.
  • Создание редактора заметок или документов в одnofайловом веб-приложении.
  • Встраивание редактора Markdown на страницу, где важна поддержка мобильной клавиатуры.
  • Преобразование Markdown в HTML на сервере с помощью отдельного парсера.

Быстрый старт

  1. 1

    Установите пакет из npm

    npm install overtype
  2. 2

    Импортируйте OverType и создайте редактор в элементе-контейнере

    import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });

Темы

#markdown#editor#javascript#wysiwyg#textarea#web-component#frontend-library

Частые вопросы

Что такое overtype?
Лёгкий редактор Markdown на JavaScript: невидимая текстовая область накладывается на стилизованный предпросмотр, есть необязательная панель инструментов, зависимости от фреймворков нет. OverType — библиотека для редактирования Markdown, которая принимает ввод через обычный textarea и отображает под ним стилизованный предпросмотр. Текстовая область прозрачная, а предпросмотр использует такую же моноширинную раскладку, поэтому вводимый текст совпадает по позиции с отображаемым результатом, а символы синтаксиса Markdown остаются видимыми.
overtype можно использовать бесплатно? Какая у него лицензия?
overtype распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
overtype всё ещё поддерживается?
Активно поддерживается. Последний коммит в overtype — 10 окт. 2026 г..
Для чего можно использовать overtype?
Добавление лёгкого ввода Markdown в веб-форму или поле комментария без этапа сборки. Создание редактора заметок или документов в одnofайловом веб-приложении. Встраивание редактора Markdown на страницу, где важна поддержка мобильной клавиатуры. Преобразование Markdown в HTML на сервере с помощью отдельного парсера.
Как установить overtype?
Установите пакет из npm: npm install overtype Импортируйте OverType и создайте редактор в элементе-контейнере: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });
Где скачать overtype?
Исходный код и инструкции по установке — на GitHub: https://github.com/panphora/overtype

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты