An editor preparing a public workshop notice changes its heading to “Saturday session moved to Room 8.” Before submitting, the editor wants to read the message without continuing to type in it. A local preview answers that immediate question. The saved public notice remains a later check.
Add the preview control
In an existing TinyMCE installation, merge this configuration into the editor setup:
tinymce.init({
selector: '#workshop-notice',
plugins: 'preview',
toolbar: 'undo redo | bold italic | preview'
});
Preserve the installation's license settings, other plugins, and save handlers. The plugin also provides a preview menu item. If your application customizes its menus, include that item in the menu configuration rather than assuming the default menu is still present.
An application button outside the editor can invoke the documented command on the correct initialized instance:
workshopEditor.execCommand('mcePreview');
Use the workshop editor's reference, particularly when a page has several editors. A preview of the wrong instance can look perfectly functional while showing a different notice.
Use a visibly unsaved change to check the source
Load a disposable notice reading “Saturday session: Room 6.” Change its body to Room 8 without saving through the application, then open Preview. The dialog should show the current edited Room 8 wording. Close the dialog and confirm the editor still contains that wording.
This fixture distinguishes a current-content preview from a separate application page that reloads the server's older Room 6 record. If your external “Preview” link reads stored data, label and implement that workflow accordingly. Two controls with the same label can draw from different versions of a document.
Also compare fields outside TinyMCE. A workshop date stored in a separate form input is not automatically part of the editor's content. If the recipient needs the date beside the room instruction, the application preview must assemble both values deliberately. The plugin dialog previews the editor content, not an entire arbitrary form.
Investigate appearance at the receiving page
Use this short notice as a reading fixture:
<h2 class="session-change">Saturday session moved to Room 8</h2>
<p>Use the north staircase. The start time remains 10 a.m.</p>
Read the heading and access instruction in Preview, then save through the application's real handler and open the receiving page. If the teal heading becomes black, inspect the class and stylesheet at each location. A successful preview does not prove that the recipient's page loads the same content rules.
The TinyMCE content styling guide explains why editing-area CSS and saved HTML are separate. The receiving page can also introduce a different width, font, or surrounding layout. Check that page at the narrow widths recipients actually use.
Do not use this dialog to certify email-client compatibility, an entire website's navigation, or a form submission outcome. Each depends on a rendering or application path beyond the current editor content.
Return to editing, then complete the real save
Preview is a reading step. TinyMCE fullscreen instead expands the working editor when the author needs more editing space. Choose the action according to what the person needs to do next.
For the workshop notice, close Preview, correct any remaining wording, and submit through the application. Reopen the saved recipient page and read Room 8, the north-staircase instruction, and the unchanged 10 a.m. start together. That final page is the one attendees will rely on.