Read-only and preview modes

The editor offers three ways to work with a document: visual editing, HTML source editing and read-only preview. EditorMode selects the view. Set IsEnabled to false to disable interaction without changing views.

The three editor modes

The mode is held in the EditorMode dependency property of type SpiceLogic.HtmlEditor.Abstractions.EditorModes. The enum has three values:

Note on the enum name. The third value is ReadOnlyPreview. Older third-party copy sometimes refers to it as HtmlPreview; that name was never on the public enum. Use ReadOnlyPreview in code and bindings.

Switching mode from C# and XAML

From C#, set the property directly. From XAML, bind it or set the literal enum value. The control raises the EditorModeChanged routed event after the swap, so the same handler covers code-driven changes and user clicks on the built-in Source / Preview toolbar buttons.

<wpfHtmlEditor:WpfHtmlEditor

    x:Name="MyEditor"

    EditorMode="ReadOnlyPreview"

    EditorModeChanged="MyEditor_EditorModeChanged" />

Read-only without leaving Design view

If you want the editing surface to stay rendered exactly as it is - for example after Save - but to stop accepting input, do not switch modes. Set MyEditor.IsEnabled = false. That disables the surface, the toolbar and the keyboard together; setting IsEnabled back to true re-enables interaction.

MyEditor.IsEnabled = false; // lock
MyEditor.IsEnabled = true; // unlock

MyEditor.IsEnabled = False ' lock
MyEditor.IsEnabled = True ' unlock

Link clicks in Preview

In ReadOnlyPreview a click on a web (http, https) or mail (mailto) link opens it in the user's default browser or mail app, and the editor keeps showing your document. Every click works, no Internet Explorer window appears, and there is no code to write. Other addresses, such as file: paths or custom protocols, are not opened from the preview.

HtmlElementClicked does not fire in preview; it reports clicks in the editing view. GetThePreviewWebBrowser().Navigating still fires for a link that would replace the preview, after the editor has opened it, so Cancel is already true. To send your own links to your own screens, handle HtmlElementClicked while the document is in WysiwygDesign, as shown in Open links in the default browser.

Hiding the toolbar in read-only mode

The two factory toolbars are exposed as Toolbar1 and Toolbar2. Toggle their Visibility from EditorModeChanged so the chrome follows the mode:

MyEditor.EditorModeChanged += (s, e) =>
{
    var v = MyEditor.EditorMode == EditorModes.WysiwygDesign ? Visibility.Visible : Visibility.Collapsed;
    MyEditor.Toolbar1.Visibility = v;
    MyEditor.Toolbar2.Visibility = v;
    MyEditor.ToolbarFooter.Visibility = v;
};

AddHandler MyEditor.EditorModeChanged, Sub(s, e)
    Dim v = If(MyEditor.EditorMode = EditorModes.WysiwygDesign, Visibility.Visible, Visibility.Collapsed)
    MyEditor.Toolbar1.Visibility = v
    MyEditor.Toolbar2.Visibility = v
    MyEditor.ToolbarFooter.Visibility = v
End Sub

Remembering the user's last mode across sessions

Persist the enum value as its name (a string), not its integer - the int values are an implementation detail and could shift if new modes are ever added. Restore the saved value on startup:

// On window closing:
Properties.Settings.Default.LastEditorMode = MyEditor.EditorMode.ToString();
Properties.Settings.Default.Save();
// On window Loaded:
if (Enum.TryParse<EditorModes>(Properties.Settings.Default.LastEditorMode, out var saved))
    MyEditor.EditorMode = saved;

' On window closing:
Properties.Settings.[Default].LastEditorMode = MyEditor.EditorMode.ToString()
Properties.Settings.[Default].Save()
' On window Loaded:
Dim saved = Nothing
If [Enum].TryParse(Of EditorModes)(Properties.Settings.[Default].LastEditorMode, saved) Then MyEditor.EditorMode = saved

Full example - preview button, toolbar sync and Escape to go back

<DockPanel>

    <TextBlock x:Name="statusText" DockPanel.Dock="Bottom" Margin="6" />

    <Button DockPanel.Dock="Top" Content="Preview" Click="OnPreviewClick" />

    <wpfHtmlEditor:WpfHtmlEditor

        x:Name="MyEditor"

        EditorModeChanged="OnEditorModeChanged"

        PreviewKeyDown="OnEditorPreviewKeyDown" />

</DockPanel>

using System.Windows;
using System.Windows.Input;
using SpiceLogic.HtmlEditor.Abstractions;
using SpiceLogic.HtmlEditor.WPF;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void OnPreviewClick(object sender, RoutedEventArgs e)
    {
        MyEditor.EditorMode = EditorModes.ReadOnlyPreview;
    }

    private void OnEditorModeChanged(object sender, RoutedEventArgs e)
    {
        var v = MyEditor.EditorMode == EditorModes.WysiwygDesign ? Visibility.Visible : Visibility.Collapsed;
        MyEditor.Toolbar1.Visibility = v;
        MyEditor.Toolbar2.Visibility = v;
        statusText.Text = $"Mode: {MyEditor.EditorMode}";
    }

    private void OnEditorPreviewKeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Escape && MyEditor.EditorMode == EditorModes.ReadOnlyPreview)
        {
            MyEditor.EditorMode = EditorModes.WysiwygDesign;
            e.Handled = true;
        }
    }
}

Imports System.Windows
Imports System.Windows.Input
Imports SpiceLogic.HtmlEditor.Abstractions
Imports SpiceLogic.HtmlEditor.WPF

Partial Public Class MainWindow
    Inherits Window

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub OnPreviewClick(sender As Object, e As RoutedEventArgs)
        MyEditor.EditorMode = EditorModes.ReadOnlyPreview
    End Sub

    Private Sub OnEditorModeChanged(sender As Object, e As RoutedEventArgs)
        Dim v = If(MyEditor.EditorMode = EditorModes.WysiwygDesign, Visibility.Visible, Visibility.Collapsed)
        MyEditor.Toolbar1.Visibility = v
        MyEditor.Toolbar2.Visibility = v
        statusText.Text = $"Mode: {MyEditor.EditorMode}"
    End Sub

    Private Sub OnEditorPreviewKeyDown(sender As Object, e As KeyEventArgs)
        If e.Key = Key.Escape AndAlso MyEditor.EditorMode = EditorModes.ReadOnlyPreview Then
            MyEditor.EditorMode = EditorModes.WysiwygDesign
            e.Handled = True
        End If
    End Sub
End Class

This example combines a preview button, toolbar visibility and a mode status label. Links in the preview open in the default browser on their own. The Escape handler uses WPF's PreviewKeyDown, which still reaches the editor in preview; the editor's own KeyDown covers the editing surfaces only.

Ask your AI to do this

I use the SpiceLogic WPF HTML Editor. Help me switch between design and read-only preview while preserving the document. Confirm the exact API names, types and defaults with the SpiceLogic MCP documentation, then show the changes for my project.