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

Подключите JavaScript WYSIWYG-редактор ViText к странице без сборщика. Импортируйте Markdown, оформите текст и получите HTML.

ViText — редактор содержимого: вы оформляете текст визуально (WYSIWYG), а приложение получает HTML. Community распространяется под MIT; React, Vue и сервер ViText для базового редактирования не нужны. Этот быстрый старт использует готовую браузерную поставку.

Подготовьте окружение

Скачайте браузерную сборку ViText Community и распакуйте архив целиком. SHA256 позволяет проверить файл. GitHub-доступ, npm и сборщик для браузерного подключения не нужны; для ESM доступна установка npm install @vitext-ru/editor@beta (инструкция).

Внутри — vitext/ с четырьмя браузерными ресурсами, example/index.html, инструкции RU/EN, LICENSE и THIRD_PARTY_NOTICES.md. Откройте пример через статический HTTP/HTTPS-сервер; file:// не поддерживается. Для английского примера добавьте ?lang=en.

Если установлен Python 3, запустите из распакованной папки:

python3 -m http.server 8080 --bind 127.0.0.1

Откройте http://127.0.0.1:8080/example/index.html. Для своего приложения скопируйте всю папку vitext/ в его статические ресурсы. Пример ниже использует адрес /vitext/; сохраните LICENSE и THIRD_PARTY_NOTICES.md при распространении.

Подключите к странице

<link rel="stylesheet" href="/vitext/vitext.css">
<div id="editor"></div>
<script src="/vitext/vitext.iife.js"></script>
<script>
  const editor = new ViText.ViText('#editor', {
    preset: 'pro',
    language: 'ru',
    content: '<p>Ваш первый документ</p>'
  });
</script>

Внутри страницы появится панель и редактируемый документ. По умолчанию библиотека использует pro; в этом примере он указан явно. Все наборы бесплатны.

Начните с Markdown

Добавьте после создания экземпляра:

async function importMarkdown() {
  await editor.setContent('# Привет\n\n**Текст** из Markdown', {
    format: 'markdown'
  });
  console.log(editor.getHTML());
}
importMarkdown().catch(console.error);

Ожидаемый документ содержит заголовок и абзац с жирным текстом. Markdown загружает отдельный движок: дождитесь Promise перед чтением результата.

Сохраните и завершите работу

const unsubscribe = editor.on('change', ({ html, css, json, revision }) => {
  // Здесь приложение сохраняет согласованную пару html + css
  // или json + css. Сервер ViText не создаётся автоматически.
  console.log({ html, css, json, revision });
});

// При удалении страницы или компонента:
unsubscribe();
editor.destroy();

HTML/CSS и Markdown применяются в документ автоматически после корректной проверки. Это не отправка на сервер. В исходнике при ошибке доступна последняя корректная версия документа.

Дальше: script, ESM, наборы, рабочие примеры.