JavaScript editor via script

Embed the ViText WYSIWYG editor in an HTML page — ready-to-use JavaScript, styles, lazy HTML/CSS and Markdown modules, and cleanup.

Script integration adds a visual content editor to a plain HTML page without a bundler or UI framework. After editing, call editor.getHTML() to export HTML for your application.

Download the Community browser archive, extract it and copy the entire vitext/ folder into your static assets. No GitHub access or bundler is required. Keep all four browser files together and preserve LICENSE and THIRD_PARTY_NOTICES.md. The archive includes a working example and RU/EN guides.

Deploy the complete distribution

Copy the archive's vitext/ folder into your application's static assets. Keep vitext.iife.js, vitext.css, source.js, codecs.js, dependency chunks and license notices together. Serve the files over HTTP; opening a file URL is not equivalent.

Create an instance

Include the stylesheet, add a target element and load vitext.iife.js before constructing new ViText.ViText(...). Factories such as ViText.createWordCountPlugin belong to the same script namespace. This is a local build, not a published CDN or npm release.

Lazy loading

HTML/CSS editing and conversion engines load when needed. Custom sourceModuleURL/codecsModuleURL values must point to trusted files from the same build. Do not update only the main JavaScript file. Await whenReady for initial Markdown/CSS and whenSourceReady for source UI.

Remove the instance

Call destroy before removing or reusing the target. Release application-owned network requests and subscriptions too. ESM, lifecycle.

<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: 'base', language: 'en', content: '<p>Hello!</p>'
  });
</script>

const editor = new ViText.ViText('#editor', {
  sourceModuleURL: '/assets/editor/source.js',
  codecsModuleURL: '/assets/editor/codecs.js',
  content: '<p>Документ</p>'
});