Configuration

All options are passed as the second argument to the ZynText constructor. Every option has a sensible default.

new ZynText(textarea, {
  toolbar: 'standard',
  height: 400,
  placeholder: 'Write something...',
  lang: 'en',
  style: 'default',
  codeTheme: 'dark',
  iconProvider: 'bootstrap',
  uploadUrl: '/api/upload',
  deleteUrl: '/api/media',
  csrfToken: '',
  aiEnabled: false,
  aiUrl: ''
});

Options Reference

Option	Type	Default	Description
`toolbar`	`string`	`'standard'`	Toolbar preset: `'minimal'`, `'standard'`, or `'full'`. See Toolbar Presets.
`height`	`number`	`400`	Minimum height of the editing area in pixels. The editor grows beyond this as content is added.
`placeholder`	`string`	`''`	Placeholder text shown when the editor is empty.
`lang`	`string`	`'en'`	UI language code (ISO 639-1). See Internationalization for available languages.
`style`	`string`	`'default'`	Visual style skin: `'default'`, `'bordered'`, `'minimal'`, or `'dark'`. See Theming.
`codeTheme`	`string`	`'dark'`	Code block theme: `'dark'` (One Dark) or `'light'` (GitHub-style).
`iconProvider`	`string`	`'bootstrap'`	Icon rendering strategy: `'bootstrap'` uses Bootstrap Icons CSS classes, `'svg'` uses inline SVG paths (no external CSS needed).
`uploadUrl`	`string`	`''`	Server endpoint for image uploads (POST). Setting this enables drag-drop, file picker, and clipboard paste. See Image Uploads.
`deleteUrl`	`string`	`''`	Server endpoint for deleting uploaded images (DELETE). The media ID is appended to the URL.
`csrfToken`	`string`	`''`	CSRF token for upload/delete requests. If empty, auto-detected from `<meta name="csrf-token">`.
`aiEnabled`	`boolean`	`false`	Enable the AI toolbar dropdown. Requires `aiUrl` to be set. See AI Integration.
`aiUrl`	`string`	`''`	Server endpoint for AI text operations (POST).

Minimal Configuration

Only the textarea element is required. Everything else has defaults:

// Uses standard toolbar, 400px height, English, default style
new ZynText(document.getElementById('editor'));

Full-Featured Configuration

new ZynText(document.getElementById('editor'), {
  toolbar: 'full',
  height: 500,
  placeholder: 'Start writing your article...',
  lang: 'fr',
  style: 'bordered',
  codeTheme: 'dark',
  iconProvider: 'svg',
  uploadUrl: '/admin/media/upload',
  deleteUrl: '/admin/media',
  csrfToken: document.querySelector('meta[name="csrf-token"]')?.content,
  aiEnabled: true,
  aiUrl: '/admin/ai/text'
});

Dynamic Options from Data Attributes

A common pattern is reading options from data attributes:

<textarea
  id="content"
  data-toolbar="full"
  data-height="500"
  data-lang="fr"
  data-upload-url="/upload"
></textarea>

<script>
const el = document.getElementById('content');
new ZynText(el, {
  toolbar: el.dataset.toolbar || 'standard',
  height: parseInt(el.dataset.height) || 400,
  lang: el.dataset.lang || 'en',
  uploadUrl: el.dataset.uploadUrl || ''
});
</script>