Real-Time Collaborative Editing Tool - Django

A full-featured collaborative text editor built with Django and WebSockets that allows multiple users to edit documents simultaneously in real-time.

Features

• Real-time collaboration: Multiple users can edit the same document simultaneously
• Live cursors: See other users' cursor positions and text selections
• User presence: View who's currently online and editing
• Document sharing: Share documents with read/write permissions
• Auto-save: Automatic saving of changes
• Rich text formatting: Basic formatting tools (bold, italic, underline)
• User authentication: Secure login/registration system
• Permission system: Control who can read, write, or admin documents

Installation & Setup

Prerequisites

• Python 3.8+
• Redis server (for WebSocket channel layer)
• pip (Python package manager)

Step 1: Setup Virtual Environment

python -m venv editor-env
source editor-env/bin/activate

Step 2: Install Dependencies

pip install -r requirements.txt

Step 3: Install and Start Redis

On Ubuntu/Debian:

sudo apt update
sudo apt install redis-server
sudo systemctl start redis-server
sudo systemctl enable redis-server

On macOS (using Homebrew):

brew install redis
brew services start redis

On Windows: Download and install Redis from the official website or use WSL.

Step 4: Project Structure

Create the following directory structure:

collaborative_editor/
├── manage.py
├── collaborative_editor/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── asgi.py
│   └── wsgi.py
├── editor/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── views.py
│   ├── urls.py
│   ├── consumers.py
│   ├── routing.py
│   └── migrations/
├── templates/
│   ├── base.html
│   ├── editor/
│   │   ├── document_list.html
│   │   ├── editor.html
│   │   ├── create_document.html
│   │   └── share_document.html
│   └── registration/
│       ├── login.html
│       └── register.html
└── static/
    └── (CSS and JS files)

Step 5: Database Setup

Run the following commands to set up the database:

python manage.py makemigrations
python manage.py makemigrations editor
python manage.py migrate
python manage.py createsuperuser

Step 5: Running the Application

Start the development server:

python manage.py runserver

The application will be available at http://localhost:8000

Configuration

Redis Configuration

The default Redis configuration in settings.py assumes Redis is running on localhost:6379. If your Redis setup is different, update the CHANNEL_LAYERS setting:

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            'hosts': [('your-redis-host', 6379)],
        },
    },
}

Production Deployment

For production deployment:

1. Update SECRET_KEY: Generate a new secret key and keep it secure
2. Set DEBUG = False: Disable debug mode
3. Configure ALLOWED_HOSTS: Add your domain names
4. Use a production database: PostgreSQL or MySQL instead of SQLite
5. Set up a reverse proxy: Use Nginx or Apache
6. Configure SSL: Enable HTTPS for WebSocket security

WebSocket Security

For production, ensure WebSocket connections use WSS (secure WebSocket) by configuring your reverse proxy to handle SSL termination.

Usage

Creating Documents

1. Register an account or log in
2. Click "New Document" on the dashboard
3. Enter a document title
4. Start editing in the collaborative editor

Sharing Documents

1. Open a document you own
2. Click the "Share" button
3. Enter the username of the person you want to share with
4. Select their permission level (Read, Write, or Admin)
5. Click "Add" to share the document

Real-time Collaboration

• Text Editing: Changes appear instantly for all users
• Cursor Tracking: See where other users are typing
• User Presence: View who's currently online in the top-right corner
• Auto-save: Changes are automatically saved

Keyboard Shortcuts

• Ctrl+B (or Cmd+B): Bold text
• Ctrl+I (or Cmd+I): Italic text
• Ctrl+U (or Cmd+U): Underline text

Technical Architecture

Backend Components

• Django Models: Document storage and user management
• WebSocket Consumer: Handles real-time communication
• Channel Layers: Redis-backed message passing
• Operational Transforms: Conflict resolution for simultaneous edits

Frontend Components

• WebSocket Client: Maintains real-time connection
• Text Editor: Captures and applies text changes
• Cursor Tracking: Visual indicators for user positions
• Collaboration UI: Online users and connection status

Data Flow

1. User types in the editor
2. Change is detected and sent via WebSocket
3. Server processes the change and broadcasts to other users
4. Other users receive and apply the change
5. Change is persisted to the database

Customization

Adding More Formatting Options

Extend the toolbar in editor.html and add corresponding JavaScript handlers:

<button type="button" id="strikeBtn" title="Strikethrough">
    <i class="fas fa-strikethrough"></i>
</button>

document.getElementById('strikeBtn').addEventListener('click', () => {
    this.wrapSelection('~~', '~~');
});

Custom Themes

Add CSS classes to customize the editor appearance:

.editor-dark-theme {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

Permission Levels

The system supports three permission levels:

• Read: Can view documents only
• Write: Can view and edit documents
• Admin: Can view, edit, and manage sharing

Troubleshooting

WebSocket Connection Issues

1. Check Redis: Ensure Redis server is running
2. Firewall: Verify WebSocket ports are open
3. Browser Console: Check for JavaScript errors
4. Django Logs: Review server logs for connection errors

Performance Optimization

1. Database Indexing: Add indexes for frequently queried fields
2. Caching: Implement Redis caching for document content
3. Connection Limits: Set appropriate limits for concurrent users
4. Operational Transforms: Implement more sophisticated conflict resolution

Common Issues

Issue: WebSocket fails to connect Solution: Verify Redis is running and accessible

Issue: Changes not syncing Solution: Check browser console for JavaScript errors

Issue: Users not appearing online Solution: Ensure WebSocket connection is established

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Submit a pull request

License

Future Enhancements

• Rich Text Editor: Integration with WYSIWYG editors
• Document History: Version control and change tracking
• File Upload: Support for images and attachments
• Comments: Inline comments and suggestions
• Export Options: PDF, Word, and other format exports
• Voice/Video Chat: Integrated communication features