An original notice editor shows a plain-text preview beside the authoring field. Changing “Use door 2” to “Use door 3” should update that preview while the author types. Undo should put door 2 back in both places. A click that merely moves the cursor should not be reported as a saved notice.
Subscribe while creating the intended editor
The host page supplies a textarea and a separate preview element:
<label for="notice-editor">Visitor notice</label>
<textarea id="notice-editor"></textarea>
<p id="notice-text-preview"></p>
In an existing, correctly configured TinyMCE installation, merge this setup with the application's required initialization options:
const preview = document.querySelector('#notice-text-preview');
tinymce.init({
selector: '#notice-editor',
setup(editor) {
const renderTextPreview = () => {
preview.textContent = editor.getContent({ format: 'text' });
};
editor.on('init', renderTextPreview);
editor.on(
'input Change Undo Redo SetContent',
renderTextPreview
);
}
});
This is a plain-text preview: assigning textContent displays text instead of executing editor HTML in the surrounding page. It does not reproduce links, tables, or layout. Use the application's established safe rendering path if the reader needs a formatted preview.
The named selector connects the listeners to one editor instance. An unrelated tinymce.activeEditor can identify a different field when the page contains several editors. Pair each preview with the instance whose content it describes.
Choose events by the result they report
The subscription covers several routes to a different preview value. Native input supports typing feedback. Undo and Redo cover those explicit history actions. SetContent covers content set through that editor operation, while init creates the first preview after initialization. More than one notification can occur for an action; this small renderer is safe to call repeatedly.
TinyMCE documents SetContent's event content property as deprecated. Reading current content from the editor avoids relying on that property. Keep code aligned with the version installed in your application.
NodeChange concerns the selected node, and SelectionChange concerns selection. They can be useful for a toolbar that follows the cursor's formatting. They do not mean a notice was changed or saved. Similarly, Dirty reports a transition from pristine to dirty, rather than a notification for every subsequent character.
For a heavier preview, schedule or debounce rendering through the application's existing UI layer. Keep its callbacks bound to the current record. Do not use the number of received events as a reliable edit count or a server revision.
Keep external resources paired with the editor
Listeners attached to the editor live in its event system. If a component also starts timers or attaches listeners to a surrounding button, remove those resources when that component or editor is destroyed. TinyMCE provides a remove lifecycle event; avoid leaving an old component updating a preview element belonging to a newly opened notice.
The content-extraction guide explains capturing the latest HTML into a form payload. A local render callback has no network or persistence operation, so its completion should not set a “Saved” label.
Exercise each route in the application
Load the door-2 notice and check the first preview. Type door 3 without leaving the editor, invoke Undo and Redo, then set a replacement notice through the application's supported content-loading action. Read the preview after each action and confirm that it shows the current editor text.
Also move the cursor without editing, open a different notice, and close the component. These checks expose selection-based false alarms and old listener ownership. Once the preview follows the right instance, use the application's save result to report persistence and reopen the actual saved notice to confirm its door instruction.