The WYSIWYG Editor

Guidevera uses Summernote as its WYSIWYG editor. It provides a rich formatting toolbar and is available to all logged-in users with the Editor role or higher.

Opening the editor

Click the pencil icon in the page toolbar while viewing a page. The content area switches to edit mode and the Summernote toolbar appears above the editing area.

Toolbar overview

• Font — font family and font size
• Style — bold, italic, underline, strikethrough, superscript, subscript
• Color & Style — text and background colour, paragraph styles
• Clear — remove all formatting from the selection
• Paragraph — unordered list, ordered list, paragraph alignment
• Height — line height
• Table — insert and edit tables (add/remove rows and columns)
• Insert — link, picture, video
• View — fullscreen mode, HTML code view, help

Code view

Click the Code view button (angle brackets icon) to switch between the visual editor and raw HTML. This is useful for pasting pre-formatted HTML or fixing layout issues. Switch back to visual mode to continue editing normally.

Unsaved changes

The editor tracks changes automatically. If you try to navigate away or close the editor while there are unsaved changes, a warning is shown. Confirm to discard, or cancel to return to the editor and save first.

Auto-save

The editor silently saves the content in the background at regular intervals. This protects against data loss from browser crashes but does not create a revision or update the modified date.