API Reference

EditorManager

The core class for creating and managing editor instances.

EditorManager.create(element, config?)

The ? in the signature means the parameter is optional.

Creates an EditorManager instance and initializes the editor inside the given DOM container.

• element: the HTML element (HTMLElement) to mount the editor on.
• config: optional editor configuration object; all fields are optional.
• Returns: an EditorManager instance. Access the underlying editor via manager.getEditor().

const manager = EditorManager.create(
  document.querySelector('#editor'),
  {
    // ——— Dimensions ———
    height: '400px',
    minHeight: '200px',
    maxHeight: '800px',
    autoHeight: false,
    // ——— Basics ———
    placeholder: 'Start writing...',
    readonly: false,
    disabled: false,
    autofocus: false,
    locale: 'en-US',
    // ——— Toolbar (insert '|' in the array for a visual separator) ———
    toolbar: [
      'undo', 'redo', 'formatPainter', '|',
      'bold', 'italic', 'underline', 'strikethrough',
      'superscript', 'subscript', '|',
      'fontFamily', 'fontSize', 'color', 'bgColor', '|',
      'heading', 'align', 'lineHeight',
      'bulletList', 'orderedList', 'outdent', 'indent', '|',
      'link', 'insertTable', 'imageUpload', 'video', '|',
      'blockquote', 'codeBlock', '|',
      'import', 'export', 'getHTML', 'getJSON', '|',
      'fullscreen', 'snapshot', 'compare',
    ],
    // ——— Paste ———
    paste: {
      mode: 'rich',           // 'rich' | 'html' | 'text'
      retainStyle: true,
      filterTags: ['script', 'style'],
      imageUpload: true,
      maxImageSize: 5 * 1024 * 1024,
      // onBeforePaste: (event, html) => html,  // Return modified HTML / false to cancel
      // onAfterPaste: (html) => {},             // Paste complete callback
    },
    // ——— Image upload (only url is required) ———
    upload: {
      url: '/api/upload',
      headers: { Authorization: 'Bearer ...' },
      fieldName: 'file',
      maxSize: 10 * 1024 * 1024,
      accept: 'image/*',
      multiple: true,
      // onUpload: (file) => Promise.resolve(url),  // Custom upload, overrides url
    },
    // ——— Version compare / snapshots (requires ProRevision plugin) ———
    compare: {
      autoBaseline: true,
      baselineLabel: 'Session baseline',
      maxVersions: 50,
      changeThreshold: 10,
      maxIntervalMs: 300000,
      triggers: { blur: true, paste: true, import: true, interval: true },
    },
    // ——— License (activates Pro features) ———
    license: {
      key: 'your-license-jwt',
      appId: 'my-app-id',
      online: 'lazy',         // false | 'lazy' | 'strict'
      offlineGraceDays: 14,
      fallback: 'watermark',  // 'watermark' | 'readonly' | 'block'
      // apiBase: 'https://api.cyteeditor.com',
      // jwksUrl: 'https://api.cyteeditor.com/.well-known/jwks.json',
    },
    // ——— Pro plugins (registered before creation) ———
    plugins: [
      ProPaste(),
      ProExport(),
      ProRevision(),
    ],
  }
)

EditorConfig

All options are optional unless otherwise noted.

Pro features: The compare, license, and plugins parameters, as well as the import, export, snapshot, and compare toolbar buttons, require a valid Pro license — see the pricing page.

Locale Mapping

Default Toolbar

When toolbar is not provided, the editor uses the following default set. Free and Pro versions use the same array; Pro-only items are disabled when no valid license is present.

[
  'undo', 'redo', 'formatPainter', '|',
  'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', '|',
  'fontFamily', 'fontSize', 'color', 'bgColor', '|',
  'heading', 'align', 'lineHeight', 'bulletList', 'orderedList', 'outdent', 'indent', '|',
  'link', 'insertTable', 'imageUpload', 'video', '|',
  'blockquote', 'codeBlock', '|',
  'import', 'export', 'getHTML', 'getJSON', '|',
  'fullscreen', 'snapshot', 'compare',
]

ToolbarItem

toolbar is an array of strings, each representing a toolbar button or control.

Visual separator: Insert the string '|' in the array to display a vertical divider between adjacent button groups. For example, ['bold', 'italic', '|', 'undo'] places a separator between "Bold / Italic" and "Undo". '|' is not a button — it is used solely for visual grouping.

import and export are dropdown groups. Their children importWord, importMarkdown, exportWord, and exportMarkdown are not top-level ToolbarItem values.

PasteConfig

UploadConfig

Server response format

After a successful upload (HTTP 2xx), the server should return the following JSON format:

Response example

{
  "status": 200,
  "data": {
    "url": "https://cdn.example.com/img/abc.png"
  }
}

CompareConfig

LicenseConfig

Instance Methods

Getting the editor instance

The following methods are all defined on the EditorManager instance. Each adapter obtains this instance differently:

• Vanilla: EditorManager.create() returns the EditorManager instance directly; all methods can be called directly.
• Vue3 / Vue2 / React / Angular / Svelte: the component ref exposes a subset of common methods directly; to call the full method set, first obtain the EditorManager instance via the ref's getEditorManager().

Vanilla

import { EditorManager } from '@cyte-editor/core'

const manager = EditorManager.create(document.querySelector('#editor'), { /* config */ })
manager.getHTML()          // direct call
manager.insertTable(2, 3)  // direct call

Vue 3

<script setup>
import { ref } from 'vue'
import { CyteEditor } from '@cyte-editor/vue3'
import type { CyteEditorExpose } from '@cyte-editor/vue3'

const editorRef = ref<CyteEditorExpose>()

// Common methods can be called directly via ref
editorRef.value?.getHTML()

// Full method set requires getting the instance via getEditorManager()
const manager = editorRef.value?.getEditorManager()
manager?.insertTable(2, 3)
</script>

<template>
  <CyteEditor ref="editorRef" v-model:html="content" />
</template>

Vue 2

<script>
export default {
  methods: {
    doSomething() {
      // Common methods
      this.$refs.editor.getHTML()
      // Full method set
      this.$refs.editor.getEditorManager()?.insertTable(2, 3)
    },
  },
}
</script>

React

import { useRef } from 'react'
import { CyteEditor } from '@cyte-editor/react'
import type { CyteEditorHandle } from '@cyte-editor/react'

function App() {
  const editorRef = useRef<CyteEditorHandle>(null)

  const doSomething = () => {
    // Common methods
    editorRef.current?.getHTML()
    // Full method set
    editorRef.current?.getEditorManager()?.insertTable(2, 3)
  }

  return <CyteEditor ref={editorRef} html={content} onChange={({ html }) => setContent(html)} />
}

Angular

import { ViewChild } from '@angular/core'
import { CyteEditorComponent } from '@cyte-editor/angular'

export class AppComponent {
  @ViewChild('editor') editor!: CyteEditorComponent

  doSomething() {
    // Common methods
    this.editor.getHTML()
    // Full method set
    this.editor.getEditorManager()?.insertTable(2, 3)
  }
}
// Template: <cyte-editor #editor [html]="content" (onChange)="content = $event.html"></cyte-editor>

Svelte

<script>
  import { CyteEditor } from '@cyte-editor/svelte'
  import type { CyteEditorApi } from '@cyte-editor/svelte'

  let editor: CyteEditorApi

  function doSomething() {
    // Common methods
    editor.getHTML()
    // Full method set
    editor.getEditorManager()?.insertTable(2, 3)
  }
</script>

<CyteEditor bind:this={editor} html={content} onChange={(e) => (content = e.html)} />

In the examples below, manager refers to the EditorManager instance obtained in the previous step (the return value of EditorManager.create() for Vanilla, or getEditorManager() for other frameworks).

Content operations

// Read content
const html = manager.getHTML()
const json = manager.getJSON()

// Replace content
manager.setContent('<p>New content</p>')

// Clear
manager.clear()

State and focus

manager.focus()
manager.setReadonly(true)   // Enter readonly
manager.setReadonly(false)  // Exit readonly

// Check whether the current selection is bold
manager.isActive('bold')

History

manager.undo()  // Undo
manager.redo()  // Redo

Plugins, commands and internal access

// Register a Pro plugin at runtime (equivalent to config.plugins at creation)
// import { ProExport } from '@cyte-editor/pro-export'
manager.use(ProExport())  // Import the plugin first

// Execute an editor command
manager.executeCommand('toggleBold')

// Get the underlying editor instance and current config
const editor = manager.getEditor()
const config = manager.getConfig()

Tables

// Insert a 3×4 table with header row at cursor
manager.insertTable(3, 4, true)

// Set table border
manager.setTableBorder({ color: '#ccc', width: 1 })

Media insertion

manager.insertImage('/assets/logo.png', 'Logo', 'Company logo')
manager.insertVideo('/assets/demo.mp4', 640, 360)

Import and export

// Export as Word file (async, requires ProExport plugin)
await manager.exportWordFile('document.docx')

// Export as Markdown string (sync)
const md = manager.exportMarkdown()

// Extract document title
const title = manager.getDocumentTitle()

// Import a Markdown file (async)
const file = new File(['# Title\nBody'], 'note.md', { type: 'text/markdown' })
await manager.importMarkdownFile(file)

Version snapshots (Pro)

// Create a snapshot manually (async)
const snap = await manager.createSnapshot('v1.0')

// Compare current content with a snapshot (async)
const diff = await manager.compareWithVersion(snap.id)

// Compare two snapshots (async)
const diff2 = await manager.compareVersions(oldId, newId)

License and lifecycle

// Update license at runtime and re-verify
manager.updateLicense({ key: 'new-jwt', appId: 'my-app' })

// Destroy the instance and release resources
manager.destroy()

Events

Subscribe with manager.on(event, handler), unsubscribe with manager.off(event, handler).