Visual Editor Technical Reference¶

Summary¶

Use this reference when you need implementation-level details for Visual Editor runtime behavior, mode-specific tooling, save flow, and server integration.

This page captures technical details of the Visual Editor implementation for developers and administrators.

Architecture Summary¶

Frontend editor stack: CKEditor 5 inline/balloon model.
Optional code editing: Monaco integration.
Real-time collaboration: SignalR events and presence.
Backend: ASP.NET Core MVC controller and view pipeline.

Visual Editor Modes¶

SkyCMS Visual Editor supports four runtime toolbar profiles:

title: compact title/heading-focused editing.
simple: lightweight formatting set for straightforward content edits.
standard: default authoring profile for most editable regions.
advanced: full-feature profile for power editing scenarios.

Mode selection can be explicit (for example via data-editor-config) or inferred by runtime behavior when no explicit profile is provided.

Simulated Toolbars by Mode¶

The following simulated strips show the configured tools for each mode.

Title mode:

Main toolbar: no standard action buttons. A title mode indicator can appear.

Selection balloon tools:

Bold Italic

Simple mode:

Paragraph Bold Italic Underline Bulleted list Numbered list Link Quote

Standard mode:

Heading Undo Redo Bold Italic Underline Link File link Image upload Quote Todo list

Advanced mode:

Heading Link Image upload Image style Toggle image caption Table Code block Indent Outdent

For a tool-by-tool breakdown with mode availability, see Visual Editor Toolbar Reference.

Recent UX updates consolidate insertion flows into unified dropdowns:

Link insertion uses a single Insert link dropdown with:
From website page
From another website
Image insertion uses a single image dropdown with:
From computer
From website storage
From another website

This keeps toolbars cleaner while preserving all insertion paths.

Important Server Components¶

Controller: EditorController actions for edit, region save, and body save.
Views: editor host view and content iframe rendering.
Hub: live collaboration hub for editor events and synchronization.

Data and Save Flow¶

Load page and initialize editable regions.
User edits a region.
Auto-save or manual save posts updated content.
Backend validates and persists new version data.
Collaboration channel propagates updates to other sessions.

Security and Permissions¶

Role-gated editor access (authors/editors/administrators as configured).
Server-side validation for save operations.
Region-level editing and collision controls.

Extension Points¶

Add custom editor plugins and toolbar buttons.
Integrate custom link/image/file tools.
Extend save hooks for pre-save validation.

Verification¶

This technical reference has served its purpose when you can map editor mode behavior to configured toolsets, trace the save lifecycle end to end, and identify where to extend or troubleshoot server and client integration points.