ESM-подключение позволяет использовать JavaScript-редактор ViText в приложении со сборщиком: импортировать класс, подключить стили и получить HTML из визуального документа.
Пакет @vitext-ru/editor@1.0.0-beta.6 опубликован в npm с ESM, TypeScript-типами и CSS. Ядро устанавливается автоматически. Для подключения без сборщика используйте браузерный архив.
Установка
Установите предварительную версию с тегом beta:
npm install @vitext-ru/editor@beta
Фиксированная версия: npm install @vitext-ru/editor@1.0.0-beta.6. Добавьте <div id="editor"></div> в HTML, затем импортируйте редактор и CSS:
import ViText from '@vitext-ru/editor';
import '@vitext-ru/editor/style.css';
const editor = new ViText('#editor', {
content: '<p>Привет!</p>', language: 'ru', preset: 'pro'
});
await editor.setContent('# Заголовок', { format: 'markdown' });
console.log(editor.getHTML());
Сборщик приложения должен сохранять доступность ленивых source.js/codecs.js. Если размещаете их самостоятельно, передайте sourceModuleURL/codecsModuleURL из script-инструкции.
Только в браузере
ViText работает с DOM. В SSR-приложении импортируйте и создавайте экземпляр после клиентского монтирования. Перед повторным монтированием уничтожайте прежний экземпляр. Nuxt/Vue являются технологией приложения, не требованием библиотеки.
const host = document.querySelector<HTMLElement>('#editor')!;
const editor = new ViText(host, { content: '<p>Документ</p>' });
await editor.whenReady();
// При уходе со страницы:
editor.destroy();
При ошибке готовности обработайте исключение и сохраните доступ к исходным данным приложения. Lifecycle, пример ESM.