n-gen.net CMS implementation of
TUI Image Editor as a File Manager Plugin

Overview

The TUI Image Editor Plugin is a utility for the n-gen.net CMS that integrates a full-featured image editing interface directly into the RichFilemanager. It allows administrators to perform advanced image manipulations—such as cropping, rotating, flipping, filtering, drawing, and adding text or shapes—without leaving the admin interface or using external software.

This plugin transforms the RichFilemanager's preview pane into a powerful image editing studio, providing an integrated, secure, and convenient way to modify images directly from the browser.

Features

a. Image Editing Tools

Crop – Crop images to custom or preset aspect ratios (1:1, 3:2, 4:3, 5:4, 7:5, 16:9)

Rotate – Rotate images by 30° increments or custom angles using a range slider (-360° to +360°)

Flip – Flip images horizontally or vertically, with reset option

Resize – Resize images with precise pixel dimensions and optional aspect ratio lock

b. Drawing and Annotation

Free Drawing – Draw freehand with adjustable brush size and colour

Straight Lines – Draw straight lines with optional arrowheads (chevron or triangle)

Shapes – Add rectangles, circles, or triangles with customisable fill (solid, transparent, or filter-based) and stroke

c. Text and Icons

Text – Add and edit text with customisable font, size, colour, and alignment (bold, italic, underline)

Icons – Add pre-defined icons (arrows, stars, hearts, location markers, etc.) or upload custom SVG icons

d. Filters and Effects

Basic Filters – Grayscale, Invert, Sepia, Vintage, Blur, Sharpen, Emboss

Advanced Adjustments – Brightness, Noise, Pixelate, Remove White, Colour Filter

Colour Blending – Tint, Multiply, and Blend modes with custom colours

e. History and Undo

Undo/Redo – Full history support with keyboard shortcuts (Ctrl+Z / Ctrl+Y)

Reset – Revert to the original image state

History Panel – Visual history timeline with clickable entries

f. File Operations

Edit from Preview – Click the "Edit Image" button in the file preview pane

Save in Original Format – Automatically preserves the original file format (JPEG, PNG, GIF, BMP, WebP)

Auto-Backup – Creates a backup before saving changes (_versions folder)

Refresh – Automatically refreshes the file manager after saving

g. User Experience

Modal Interface – Full-screen modal with responsive layout

Intuitive Controls – Well-organised toolbar and sub-menus

Keyboard Shortcuts – Common shortcuts for undo, redo, delete, copy, paste

Progress Indicators – Visual feedback during loading and saving

Installation

To install the plugin simply use the n-gen.net CMS Updater.

Technical Details

What the Plugin Does

Detects image selection – Monitors the RichFilemanager preview pane for image files

Adds Edit button – Injects an "Edit Image" button into the preview action area

Loads the editor – Initialises the TUI Image Editor with the selected image

Handles editing – Provides full image editing capabilities

Saves changes – Exports the edited image in the original format and saves it to the server

Refreshes the view – Updates the file manager to reflect the changes

File Operations

Opening an image – Preview → Click Edit → Editor loads → Image displayed

Saving an image – Apply edits → Click Save → Original format preserved → Backup created → File saved

Cancelling – Click Cancel → Editor closes → No changes saved

Resetting – Click Reset → Image reverts to original state

Integration with RichFilemanager

The plugin integrates seamlessly with the RichFilemanager's existing file preview system:

• File detection – Extracts the file path from the preview image URL
• Action injection – Adds the Edit button to the preview action area
• Refresh handling – Triggers a file manager refresh after saving

File Backup

When an image is saved, the plugin creates a backup in a _versions subfolder:

/images/
└── _versions/
└── filename_20240630_143022.jpg
Backup naming – Original filename + timestamp

Retention – Keeps the 10 most recent backups

Auto-cleanup – Older backups are automatically removed

System Requirements

n-gen.net CMS – Version 1.3 or higher

RichFilemanager – Integrated file manager

Browser – Modern browsers (Chrome, Firefox, Edge, Safari)

JavaScript – Enabled

Loading Sequence

CSS loading – Loads TUI styles from /styles/

Script loading – Loads scripts in correct dependency order:

tui-code-snippet → tui-fabric → tui-color-picker → tui-FileSaver → tui-image-editor → tui-white-theme

Initialisation – Editor is ready when all scripts are loaded

Button injection – Edit button appears in the preview pane

Security Considerations

Access Control

Level 3 required – Only Site Admins (level 3 users) and Owners (level 4 users) can access the File Manager and the Image Editor

Authentication – Must be logged in with valid credentials

Session validation – IP and user-agent verification

Data Protection
File path validation – Prevents directory traversal attacks

Image data validation – Validates base64 image data before processing

Backup creation – Automatic backup before overwriting

Extension whitelist – Only image extensions are allowed

Audit Trail
All file operations are logged to /App_Data/pro_db.log:

Timestamp – When the operation occurred

User – Who performed the operation

IP address – Where the request originated

Operation type – LOAD, EDIT, SAVE, DELETE

File path – The image involved

Status – Success or failure

Backup Security
Backup folder – _versions is protected from direct access

Auto-deletion – Old backups are automatically removed

Manual deletion – Backup files can be deleted through the file manager

Troubleshooting

Error: "tui.ImageEditor is not a constructor"
Cause: The TUI Image Editor script failed to load or register properly

Solution:

Check that /scripts/tui-image-editor.js exists and is accessible

Verify all SVG icon files are in the same directory as the main script

Clear browser cache and reload

Check the browser console for detailed error messages

Error: "Failed to load CSS"
Cause: CSS files not found or server permissions issue

Solution:

Verify /styles/tui-image-editor.css and /styles/tui-color-picker.css exist

Check file permissions (read access required)

Clear browser cache and reload

Error: "Could not find canvas element"
Cause: The editor couldn't locate the canvas for image export

Solution:

Ensure the image loaded correctly

Try reloading the editor

Check console for JavaScript errors

Error: "Error saving image"
Cause: Server-side save operation failed

Solution:

Check server permissions for the target directory

Verify the image path is valid

Check the server logs for details

Ensure the filemanager.ashx handler is accessible

Preview not showing
Cause: The preview window may not be fully loaded

Solution:

Wait a moment for the preview to load

Click on a different file and then back to the image

Refresh the file manager

Edit button doesn't appear
Cause: The plugin didn't detect the preview window

Solution:

Ensure you're viewing an image file (not a folder)

Wait 1-2 seconds for the button to appear

Click on the image to select it first

Refresh the file manager

Image not saving in original format
Cause: The file extension detection may have failed

Solution:

Ensure the image has a valid extension (jpg, png, gif, etc.)

The plugin defaults to PNG if the extension is not recognised

Manual check: Verify the file extension in the file manager

Performance Impact

During Image Operations

Loading – Image is loaded from the server once

Editing – All operations are performed client-side

Saving – Only the final image data is sent to the server

Memory – Large images (20MB+) may impact performance

Optimisation

Client-side processing – Reduces server load

Image compression – JPEG images saved at 92% quality

Caching – Scripts are cached after first load

Smart loading – Only loads the editor when needed

Best Practices

Always backup before editing – The plugin creates automatic backups, but additional backups are recommended

Test on non-production images first – Verify functionality before editing critical images

Save frequently – Save your work regularly to avoid losing changes

Use the correct format – Save JPEG for photographs, PNG for graphics with transparency

Monitor backup folder – Periodically clean up old backups in the _versions folder

Keep images within reasonable size – Large images (20MB+) may affect performance

Review changes before saving – Use the preview to verify your edits

Log out when finished – Always log out after editing sensitive content