Editor

Introduction

The Content Editor is the heart of Aether CMS, providing a powerful and intuitive interface for creating and editing posts and pages. This comprehensive toolkit gives you complete control over your content with a distraction-free writing environment, real-time preview, and extensive metadata management.

Accessing the Editor

There are several ways to access the Content Editor:

1. Creating new content:

   • Click "Add New Post" from the Dashboard
   • Click "Add New Page" from the Dashboard
   • Use the "Add New" button in the Posts or Pages table view

2. Editing existing content:

   • Click on a post/page title in the table view
   • Click the Edit button (pencil icon) next to an item in the table
   • Click "Edit" in Aether Bar on any content preview

Editor Interface Overview

The Content Editor is divided into two main sections:

1. Main Editing Area: Contains the title, subtitle, and content fields, along with a powerful Markdown editor
2. Sidebar Panels: Contains metadata, publishing options, and additional settings

Main Interface Components

• Editor Header: Contains the title and action buttons (Save, Publish, etc.)
• Content Entry Area: Includes title field, subtitle field, and the main Markdown editor
• Markdown Toolbar: Provides formatting options and tools
• Preview Panel: Shows how content will appear on your site
• Settings Sidebar: Contains publishing options and metadata fields

Editor Header

The header section provides context and primary actions:

• Title: Shows "Edit Post", "Edit Page", "Add new Post", or "Add new Page"
• Action Buttons: Context-sensitive buttons based on content status

Action Buttons

Different buttons appear based on the content's current status:

For New Content

• Save Draft: Saves the content as a draft (not visible to visitors)
• Publish: Saves and publishes the content (visible to visitors)

For Existing Draft Content

• Update: Saves changes while maintaining draft status
• Publish: Changes status to published and makes content visible

For Existing Published Content

• Update: Saves changes while maintaining published status
• Revert to Draft: Changes status to draft and hides content from visitors

Title and Subtitle Fields

The primary identification fields for your content:

Title Field

• The main heading for your content
• Automatically generates a URL slug based on the title
• Used in navigation, search results, and browser tabs
• Updates the editor header as you type

Subtitle Field

• Optional secondary heading or tagline
• Provides additional context for your content
• Can be used by themes for enhanced presentation

Markdown Editor

The core writing environment features a powerful Markdown editor with real-time preview:

Markdown Toolbar

The toolbar provides quick access to common formatting options:

Text Formatting Controls

• Headings: H1, H2, and H3 buttons for section headers
• Text Styling: Bold (B), Italic (I), and Strikethrough (S)
• Lists: Bulleted list, Numbered list, and Task list buttons
• Block Elements: Quote block, Inline code, and Code block
• Inserts: Link, Image, and Horizontal rule

Each button inserts the appropriate Markdown syntax and works intelligently with selected text.

Editing Modes

The editor provides multiple viewing modes for different writing preferences:

Editor Mode

• Full-screen editing area focused on writing
• Toolbar and helpers visible
• No rendered preview

Preview Mode

• Shows the rendered version of your content
• Applies Markdown formatting in real-time
• Indicates when unsaved changes exist

Side-by-Side Mode (Fullscreen only)

• Shows editor and preview simultaneously
• Changes reflect in real-time on the preview side
• Available only in fullscreen mode

View Controls

The view controls allow you to change how you work with the editor:

• Editor/Preview Tabs: Toggle between editing and previewing
• Fullscreen Button: Expands to a distraction-free environment
• Side-by-Side Button: Shows editor and preview simultaneously (in fullscreen mode)

Fullscreen Mode

For a distraction-free writing experience:

1. Click the fullscreen button in the view controls
2. The editor expands to fill the entire screen
3. All sidebar elements are hidden
4. Tab navigation and enhanced toolbar remain accessible
5. Press ESC or click the exit button to return to normal mode

Keyboard Shortcuts

The editor supports several keyboard shortcuts for efficient writing:

• Ctrl/Cmd + B: Bold text
• Ctrl/Cmd + I: Italic text
• Ctrl/Cmd + K: Insert link
• Tab: Indent text or navigate between fields
• Shift + Tab: Outdent text
• Escape: Exit fullscreen mode

Markdown Support

The editor supports standard Markdown syntax with the following features:

Text Formatting

• Bold: Surround text with double asterisks (**bold**)
• Italic: Surround text with single asterisks (*italic*)
• Strikethrough: Surround text with double tildes (~~strikethrough~~)

Headings

• Level 1: Start line with # (# Heading 1)
• Level 2: Start line with ## (## Heading 2)
• Level 3: Start line with ### (### Heading 3)

Lists

• Bulleted Lists: Start lines with - or * (- Item)
• Numbered Lists: Start lines with numbers (1. Item)
• Task Lists: Start lines with - [ ] (- [ ] Task)

Block Elements

• Blockquotes: Start lines with > (> Quote)
• Code Blocks: Surround with triple backticks (```code```)
• Horizontal Rules: Three hyphens on a line (---)

Links and Images

• Links: [Link text](URL)
• Images: ![Alt text](image-URL)

Real-time Preview

The preview panel shows rendered Markdown with these features:

• Updates in real-time as you type
• Shows a change indicator when unsaved changes exist

Content Metadata Sidebar

The sidebar contains various panels for managing content metadata and settings:

Publishing Options

Controls the basic publication settings:

• Status: Choose between "Draft" or "Published"
• Slug: The URL-friendly version of the title (auto-generated but editable)
• Page Type: For pages only, choose between "Normal" or "Custom Template"
• Parent Page: For custom pages, select a parent page for hierarchical URLs

SEO Settings

Optimize your content for search engines:

• Meta Description: Summary text used in search results
• Character Counter: Shows character count with color-coded feedback

Media Management

Tools for working with images and media:

Featured Image

• Set Featured Image: Opens the media selection modal
• Preview: Shows the selected featured image
• Remove: Removes the current featured image

Adding Images to Content

To add images within your content:

1. Click the image button (🖼️) in the Markdown toolbar
2. The Media Selection modal will open
3. Select an existing image or upload a new one
4. Click "Select" to insert the image at the cursor position

The image will be inserted as Markdown syntax with the proper URL and alt text.

Additional Settings

Manage other content properties:

For Posts and Pages

• Publish Date: Schedule or backdate content
• Excerpt: Brief summary of the content
• Author: Content creator attribution

For Posts Only

• Category: Primary classification (single selection)
• Tags: Secondary classifications (multiple selections)
• Related Posts: Link to other relevant content (up to 5 items)

Post-Specific Features

When editing posts, you'll have access to additional features:

Category Management

Assign a primary category to your post:

1. Type a category name in the input field
2. Click "Add" or press Enter
3. The category appears as a pill item in the categories list
4. Remove a category by clicking the "×" button

Only one category can be assigned to a post at a time.

Tags Management

Add multiple tags to help with content organization:

1. Type a tag name in the input field
2. Click "Add" or press Enter
3. The tag appears as a pill item in the tags list
4. Remove a tag by clicking the "×" button

Multiple tags can be added to a single post.

Related Posts

Link your post to other relevant content:

1. Click the "Add Related Post" button
2. A dropdown appears with a search box and available posts
3. Select posts to add them to the related posts list
4. Remove related posts by clicking the "×" button
5. Rearrange related posts by dragging them to new positions

Page-Specific Features

When editing pages, you'll have access to page-specific features:

Page Types

Choose between two page types:

1. Normal: Uses the standard page template from your theme
2. Custom Template: Uses a custom template file from your theme's "custom" directory

Parent Page Selection

For custom pages, you can create hierarchical relationships:

1. Select "Custom Template" as the page type
2. The Parent Page dropdown becomes available
3. Select a parent page from the dropdown
4. The page will be accessible at /[parent-slug]/[page-slug]

Autosave and Change Tracking

The editor includes robust change tracking features:

Unsaved Changes Warning

If you attempt to navigate away with unsaved changes:

1. A warning dialog appears
2. You can choose to "Stay on Page" or "Leave Anyway"
3. This prevents accidental loss of work

Change Indicators

Visual cues indicate unsaved changes:

• A dot indicator appears on the Preview tab
• The modification state is reflected in the UI
• Status changes show a hint to save

Saving and Publishing

Saving Content

To save your work:

1. Click the appropriate action button (Save Draft, Publish, Update)
2. The content is sent to the server
3. A success confirmation appears
4. For new content, you're redirected to the edit page for the new item

Content Validation

The editor validates your content before saving:

• Required fields (like Title) are checked
• Slug format is validated
• Duplicate slugs trigger a warning dialog

Duplicate Slug Handling

If your content would create a duplicate URL:

1. A warning dialog appears
2. You can choose to:
   • Cancel and modify the slug
   • Save anyway (overwriting the existing content)
3. A suggested unique slug may be provided

Markdown Editor Details

Toolbar Button Behavior

Each toolbar button has specialized behavior:

Heading Buttons

• Toggle heading levels when clicked
• Remove heading format when clicked on existing heading
• Apply to the entire line containing the cursor

Formatting Buttons

• Apply formatting to selected text
• Insert empty formatting markers if no text is selected
• Toggle formatting when clicked on already formatted text

List Buttons

• Convert lines to list items
• Toggle between list formats
• Handle multi-line selections intelligently

Block Element Buttons

• Quote: Convert selected lines to blockquotes
• Code: Format inline code or create code blocks
• HR: Insert a horizontal rule with proper spacing

Link and Image Buttons

• Use selected text as the link text or alt text
• Provide a UI for entering URLs
• For images, open the Media Selection modal

Media Selection Integration

The editor integrates with the Media Library for image handling:

Media Selection Modal

When adding images or setting featured images:

1. The Media Selection modal opens
2. You can browse existing media or upload new items
3. Select an item and click "Select"
4. For content images, Markdown is inserted at the cursor position
5. For featured images, the preview updates in the sidebar

Markdown Image Syntax

When inserting images, the editor uses standard Markdown syntax:

![Alt text](/content/uploads/image-path.jpg)

Alt text is automatically populated from the media item's metadata.

Responsive Behavior

The editor adapts intelligently to different screen sizes:

Desktop View

• Two-column layout with editor and sidebar
• Full toolbar visibility
• All features accessible

Tablet View

• Editor and sidebar stack vertically
• Toolbar adapts to available width
• All features remain accessible

Mobile View

• Simplified layout optimized for small screens
• Editor takes priority in the vertical flow
• Sidebar sections remain accessible but stack vertically

Fullscreen Mode Across Devices

• Expands to use all available screen space
• Adapts toolbar and controls to the device
• Side-by-side view available on larger screens
• Scrollable content areas on smaller devices

Advanced Editor Features

Editor State Management

The editor maintains complete state information:

• Content changes are tracked
• Formatting state is preserved
• Selection position is remembered
• Tab state is maintained
• View mode preferences are stored

Error Prevention

Multiple safeguards prevent data loss:

• Automatic validation before saving
• Confirmation for destructive actions
• Navigation warnings for unsaved changes

Accessibility Features

The editor includes accessibility enhancements:

• Keyboard navigation support
• ARIA attributes for screen readers
• High-contrast visual indicators
• Alternative text requirements for images

Custom Page Templates

When creating custom pages, the editor provides specialized guidance:

Custom Page Notification

When "Custom Template" is selected:

1. An information panel appears
2. Shows the URL structure for the custom page
3. Indicates the required theme template file
4. Explains custom page behavior

Template Requirements

For custom pages to work properly:

• The theme must include a custom directory
• A template file matching the page slug should exist
• The appropriate template will be used with an intelligent fallback mechanism
• The URL structure follows /[slug] or /[parent-slug]/[slug]

Content Publishing Workflow

Draft Workflow

1. Create content using "Save Draft"
2. Preview and revise as needed
3. Publish when ready

Scheduled Publishing

1. Create or edit content
2. Set a future Publish Date
3. Publish the content
4. Content becomes visible on the scheduled date

Content Updates

1. Edit existing content
2. Make changes as needed
3. Use the Update button to save
4. Changes are immediately visible if published

Best Practices for Content Creation

Effective Markdown Usage

• Use headings to create a logical document structure
• Keep headings in hierarchical order (H1 → H2 → H3)
• Use lists for sequential or grouped items
• Use blockquotes for citations or highlighted content
• Add alt text to all images for accessibility

Content Optimization

• Use descriptive, keyword-rich titles
• Create concise meta descriptions (140-160 characters)
• Use headings to break up content for readability
• Include relevant categories and tags
• Link to related content to improve navigation

Editor Efficiency Tips

• Use keyboard shortcuts for common formatting
• Toggle between editor and preview for best results
• Use fullscreen mode for concentrated writing
• Save drafts frequently during long writing sessions
• Preview on different devices before publishing

Technical Implementation

The Aether CMS Editor is built with modern vanilla JavaScript and consists of several key modules:

Core Modules

• EditorState: Manages content data and UI state
• EditorUI: Handles DOM interactions and UI updates
• ContentService: Manages API interactions and saving
• SlugManager: Handles URL slug generation and validation
• MarkdownEditor: Provides Markdown editing capabilities
• MediaSelector: Integrates media library functionality
• EditorEnhancements: Adds tags, categories, and related posts features

Component Integration

These modules work together for a seamless editing experience:

1. User interactions trigger UI module methods
2. UI modules update the editor state
3. State changes propagate to relevant components
4. API calls handle data persistence
5. Visual feedback keeps the user informed

The modular architecture ensures maintainability and performance while providing a rich feature set.

Next

You’re ready to explore the invisible power behind modern publishing — Aether Core Concepts.