Editora - Preview

Overview

The Preview plugin provides live preview functionality, allowing users to see how their document will appear in different formats and contexts. Toggle between edit and preview modes with real-time rendering.

Features

✓ Live preview mode
✓ Split-view editing
✓ Real-time rendering
✓ Multiple format preview
✓ Responsive preview
✓ Dark/light themes
✓ Zoom controls
✓ Full-screen mode

Installation

npm install @editora/plugin-preview

Basic Usage

import Editora from '@editora/core';
import PreviewPlugin from '@editora/plugin-preview';

const editor = new Editora('#editor');
editor.use(PreviewPlugin);

// Toggle preview mode
editor.execCommand('togglePreview');

Preview Modes

Choose how you want to see your content:

Edit Mode: Standard editing interface
Preview Mode: View rendered output
Split View: Edit and preview side-by-side
Fullscreen: Dedicated preview

Configuration Options

Option	Type	Description
defaultMode	string	Default view mode (edit/preview/split)
syncScroll	boolean	Sync scrolling in split view (default: true)

API Methods

togglePreview(): Toggle preview mode
setSplitView(enabled): Enable split-view mode
setZoom(level): Zoom preview
getPreviewHtml(): Get rendered HTML