Skip to main content

PreviewButton Plugin

The PreviewButton plugin enhances the On-Codemerge editor by adding a feature to preview the current content in a modal window.

on-CodeMerge

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:

Integration​

To integrate the PreviewButton plugin with the On-Codemerge editor, import and register it with EditorCore:

Initialize and Register PreviewButton
import EditorCore from 'on-codemerge';
import { PreviewButton } from 'on-codemerge/previewButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);
    editor.registerModule(new PreviewButton());
  }
});

Features​

  • Content Preview: Provides a button to preview the current editor content in a modal window.
  • Modal Interface: Displays the preview in a separate, overlayed window for a clear and isolated view.

How it Works​

Upon clicking the 'Preview' button in the toolbar, the plugin opens a modal window showing the current content of the editor: