Node Edit Protection
Prevents accidental loss of unsaved changes on node edit forms by displaying a browser confirmation dialog when users attempt to navigate away.
node_edit_protection
Install
composer require 'drupal/node_edit_protection:8.x-1.2'
Overview
Node Edit Protection is a simple but essential utility module that helps prevent users from accidentally losing their unsaved work when editing Drupal nodes. It automatically detects when a user has made changes to a node edit form and displays a browser confirmation dialog if they attempt to navigate away without saving.
The module works by attaching a JavaScript behavior to all node edit forms. It tracks user interactions with form fields and monitors navigation attempts including clicking links, using the browser's back button, closing the tab, or refreshing the page. When unsaved changes are detected, the browser displays a warning message: "You will lose all unsaved work."
This module also includes built-in support for CKEditor, detecting changes made within WYSIWYG editor instances.
Features
- Automatically protects all node edit forms without configuration
- Detects unsaved changes by monitoring form field interactions (blur events)
- Shows browser confirmation dialog when navigating away with unsaved changes
- Allows normal form submission without triggering the warning
- Handles various navigation methods: links, back button, page refresh, tab close
- Built-in CKEditor integration to detect changes in WYSIWYG editors
- Works transparently with no user-visible settings or admin interface
- Compatible with Drupal 8, 9, 10, and 11
Use Cases
Protecting Content Editors from Accidental Data Loss
Content editors working on lengthy articles or complex node forms can accidentally lose their work by clicking a link in the admin toolbar, using the browser's back button, or closing the browser tab. Node Edit Protection displays a warning dialog in all these scenarios, giving editors a chance to cancel the navigation and save their work.
Multi-Tab Editing Workflow
Editors who frequently work with multiple browser tabs may accidentally close a tab with unsaved changes. This module intercepts the tab close action and prompts the user to confirm, preventing accidental data loss.
Training Environment Protection
In training environments where new Drupal users are learning the system, this module provides an extra safety net against common mistakes like navigating away before saving content.
Tips
- The module works automatically with no configuration needed - simply install and enable it
- The protection applies to all node add and edit forms, not just specific content types
- The warning message is translatable through Drupal's standard translation interface
- Form submit buttons are automatically excluded from triggering the warning, so normal save operations work seamlessly
- Links with href='#' (in-page anchors) are also excluded to prevent false positives with AJAX operations
Technical Details
Hooks 1
hook_form_alter
Attaches the node_edit_protection JavaScript library to all forms that have the 'node-form' CSS class, which includes all node add and edit forms.
Troubleshooting 3
Ensure the module is enabled and that JavaScript is working correctly. Check the browser console for any JavaScript errors that might prevent the module from functioning. Also verify that the form has the 'node-form' CSS class.
The module detects changes by monitoring blur events on form fields. If you click into a field and then click out, it will be marked as edited. This is by design to ensure no changes are missed.
Ensure you are using CKEditor (not CKEditor 5) as the module checks for the global CKEDITOR object. For CKEditor 5, the detection may not work as expected.