Skip to content

TinyMCE State Sync

How the TinyMCE text editor syncs (and fails to sync) with Divi 5's internal save state.

Quick Reference

What this documents: The synchronization gap between TinyMCE's DOM state and Divi 5's internal React save state, and the workaround using keyboard events. Key data structures: window.tinymce (parent window), _content-innerContent_vb_tiny_mce editor instance, React event chain for keyboard input. Last verified: 2026-03-12

How It Works

When a Text module is selected in the Visual Builder, TinyMCE powers the content editor in the settings panel:

// Get the active TinyMCE editor (only when a text module is selected)
const editor = window.tinymce.get('_content-innerContent_vb_tiny_mce');
const html = editor.getContent(); // Reading works

The Sync Problem

tinymce.setContent() updates the settings panel UI but does NOT sync to Divi's internal React state. When the user clicks Save, Divi reads from its own state — not from TinyMCE. Content set via setContent() will appear in the panel but will revert after save.

What Does Work

Keyboard input triggers the proper React event chain that Divi captures. The reliable workflow for setting text content programmatically:

  1. Click into the TinyMCE editor area (in the settings panel)
  2. Select all content: Cmd+A / Ctrl+A
  3. Type the replacement content via keyboard events

For browser automation tools (Playwright, Claude in Chrome), this means using type() actions rather than JavaScript DOM manipulation.

TinyMCE Formatting Shortcuts

These keyboard shortcuts work within the TinyMCE editor and properly sync:

Shortcut Action
Cmd+B / Ctrl+B Bold
Cmd+I / Ctrl+I Italic
Cmd+K / Ctrl+K Insert link
Cmd+A / Ctrl+A Select all
Paragraph dropdown Change heading level (H1-H6)