TinyMCE Integration

WriteTrack includes a native TinyMCE plugin, compatible with TinyMCE v6+ (including Moodle 4.4+).

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 writetrack/tinymce to register the plugin, then add 'writetrack' to your plugins list:

import 'writetrack/tinymce';

tinymce.init({
  selector: '#editor',
  plugins: ['writetrack'],
  writetrack_license: 'your-license-key',
});

The plugin works in both inline and iframe (default) editor modes. No extra configuration needed — iframe document context is detected automatically.

Configuration

Pass options as TinyMCE editor options, prefixed with writetrack_:

tinymce.init({
  selector: '#editor',
  plugins: ['writetrack'],
  writetrack_license: 'your-license-key',
  writetrack_userId: 'user-123',
  writetrack_contentId: 'document-456',
  writetrack_metadata: { formName: 'signup' },
  writetrack_autoStart: true,
});

Option	Type	Default	Description
writetrack_license	string	undefined	WriteTrack license key
writetrack_userId	string	undefined	User identifier included in metadata
writetrack_contentId	string	undefined	Content identifier included in metadata
writetrack_metadata	Record<string, unknown>	undefined	Additional metadata
writetrack_autoStart	boolean	true	Start tracking when editor initializes
writetrack_wasmUrl	string	undefined	URL to WASM binary for analysis
writetrack_persist	boolean	false	Enable IndexedDB session persistence (requires writetrack_contentId)
writetrack_onTick	(data: { activeTime: number; totalTime: number; tracker: WriteTrack }) => void	undefined	Callback fired every ~1s with active session time and tracker instance
writetrack_onReady	(tracker: WriteTrack) => void	undefined	Callback fired when tracker is ready

Sending the Trace on Form Submit

The most common integration for an existing app: pull the session data out of the tracker when the form submits, and send it with the same request that carries the content. The tracker lives at editor.plugins.writetrack.tracker after init:

<form id="exam-form" method="post" action="/submit.php">
  <textarea id="essay" name="essay_html"></textarea>
  <input type="hidden" name="wt_trace" id="wt-trace" />
  <button type="submit">Submit</button>
</form>

<script type="module">
  import 'writetrack/tinymce';

  tinymce.init({ selector: '#essay', plugins: ['writetrack'] });

  document.getElementById('exam-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const tracker = tinymce.get('essay').plugins.writetrack.tracker;

    tracker.stop();
    document.getElementById('wt-trace').value = JSON.stringify(
      tracker.getData()
    );

    tinymce.triggerSave(); // sync editor content back to the textarea
    e.target.submit();
  });
</script>

Your backend stores wt_trace as JSON like any other column. To send the trace separately from the form instead, register a webhook sink via writetrack_onReady:

import { webhook } from 'writetrack/pipes';

tinymce.init({
  selector: '#essay',
  plugins: ['writetrack'],
  writetrack_onReady: (tracker) => {
    tracker.pipe(webhook({ url: '/api/writetrack' }));
  },
});

Accessing Data

The plugin API is available at editor.plugins.writetrack after the editor’s init event:

tinymce.init({
  selector: '#editor',
  plugins: ['writetrack'],
  writetrack_license: 'your-license-key',
  setup: (editor) => {
    editor.on('init', () => {
      const wt = editor.plugins.writetrack;
      const data = wt.tracker?.getData();
      const isTracking = wt.isTracking;
    });
  },
});

Or use the writetrack_onReady callback:

tinymce.init({
  selector: '#editor',
  plugins: ['writetrack'],
  writetrack_license: 'your-license-key',
  writetrack_onReady: (tracker) => {
    console.log('WriteTrack ready', tracker.getData());
  },
});

Plugin API

Property	Type	Description
tracker	WriteTrack | null	The WriteTrack instance (null until init)
isTracking	boolean	Whether capture is active
destroy()	() => void	Stop tracking and clean up
getMetadata()	() => { name: string; url: string }	Plugin metadata (for TinyMCE Help plugin)

Cleanup

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

editor.plugins.writetrack.destroy();

TypeScript

import type { WriteTrackTinyMCEPlugin } from 'writetrack/tinymce';