TinyMCE Integration

WriteTrack includes a first-party TinyMCE integration, compatible with TinyMCE v6+.

Installation

Install WriteTrack alongside TinyMCE:

npm

npm i writetrack tinymce

pnpm

pnpm add writetrack tinymce

yarn

yarn add writetrack tinymce

bun

bun add writetrack tinymce

Basic Usage

import tinymce from 'tinymce';
import { createWriteTrackTinyMCE } from 'writetrack/tinymce';

tinymce.init({
  selector: '#editor',
  inline: true, // recommended for full WriteTrack support
  setup: (editor) => {
    const handle = createWriteTrackTinyMCE(editor, {
      license: 'your-license-key',
    });

    // Access WriteTrack data after editor init
    editor.on('init', () => {
      const data = handle.tracker?.getData();
    });
  },
});

Inline mode recommended

TinyMCE’s default iframe mode isolates the editor in a separate document context. WriteTrack’s focus and selection tracking relies on window and document listeners, which only work correctly when the editor is in the same document.

Use inline: true in your TinyMCE configuration for full WriteTrack support. In iframe mode, keystroke and clipboard tracking will work, but focus loss detection and selection change tracking may be degraded.

Configuration

Pass options as the second argument:

const handle = createWriteTrackTinyMCE(editor, {
  license: 'your-license-key',
  userId: 'user-123',
  contentId: 'document-456',
  metadata: { formName: 'signup' },
  autoStart: true, // default
});

Option	Type	Default	Description
license	string	undefined	WriteTrack license key
userId	string	undefined	User identifier included in metadata
contentId	string	undefined	Content identifier included in metadata
metadata	Record<string, unknown>	undefined	Additional metadata
autoStart	boolean	true	Start tracking when editor initializes
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

The tracker is available after TinyMCE’s init event fires:

tinymce.init({
  selector: '#editor',
  inline: true,
  setup: (editor) => {
    const handle = createWriteTrackTinyMCE(editor, {
      license: 'your-license-key',
    });

    editor.on('init', () => {
      const tracker = handle.tracker;
      const data = tracker?.getData();
      const isTracking = handle.isTracking;
    });
  },
});

Manual DOM Attachment

If you prefer not to use the integration, you can attach WriteTrack directly in inline mode:

import WriteTrack from 'writetrack';
import tinymce from 'tinymce';

tinymce.init({
  selector: '#editor',
  inline: true,
  setup: (editor) => {
    editor.on('init', () => {
      const tracker = new WriteTrack({
        target: editor.getBody(),
        license: 'your-license-key',
      });
      tracker.start();
    });
  },
});

Cleanup

The integration automatically cleans up when TinyMCE’s remove event fires. You can also call destroy() manually:

handle.destroy();

TypeScript

import type {
  WriteTrackTinyMCEOptions,
  WriteTrackTinyMCEHandle,
} from 'writetrack/tinymce';