django-vditor

django-vditor is a production-ready Markdown Editor plugin application for django base on vditor.
django-vditor was inspired by great django-mdeditor.
✨ Enhanced with Vibe Coding - Production-ready code quality and security improvements

Features

🎯 Core Vditor Features

Three editing modes: WYSIWYG, Instant Rendering (IR), Split Screen Preview (SV)
Rich content support: Mathematical formulas, diagrams, charts, flowcharts, Gantt charts, multimedia
Advanced functionality: Outline, syntax highlighting, code copying, graphviz rendering
Export capabilities: Multiple formats with built-in security filtering
Customizable toolbar: 36+ operations with full customization support
Upload support: Drag & drop, clipboard paste, real-time progress, CORS support
Multi-platform: Responsive design, mobile-friendly, mainstream browser support
Internationalization: Built-in Chinese, English, Korean localization

⚡ Production-Ready Enhancements (by Vibe Coding)

🔒 Enhanced Security: File validation, content sanitization, path traversal protection
🚀 Performance Optimization: Multi-level caching, file deduplication, LRU caching
📝 Type Safety: Complete TypeScript-style type hints for better IDE support
🛡️ Error Handling: Comprehensive logging, graceful fallbacks, detailed error messages
🔧 Management Tools: Django management commands for cache operations
📊 Code Quality: Black formatting, comprehensive test suite, security best practices

🧩 Django Integration

VditorTextField: Model field with admin integration
VditorTextFormField: Form field for custom forms
VditorWidget: Customizable admin widget
Management Commands: Cache management and optimization tools

🚀 Quick Start

Installation.

    # pip
    pip install django-vditor
    # pipenv
    pipenv install django-vditor
    # poetry
    poetry add django-vditor
    # pdm
    pdm add django-vditor

Add vditor to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = [
        ...
        'vditor',
    ]

add frame settings for django3.0+ like this：

X_FRAME_OPTIONS = 'SAMEORIGIN'

Add 'media' url to your settings like this:

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

Add url to your urls like this:

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    path('vditor/', include('vditor.urls'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Write your models like this:

from django.db import models
from vditor.fields import VditorTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = VditorTextField()

Register your model in admin.py
Run python manage.py makemigrations and python manage.py migrate to create your models.
Login Admin ,you can see a markdown editor text field like this:

django-vditor

Usage

Edit fields in the model using Markdown

Using Markdown to edit the fields in the model, we simply replace the TextField of the model with VditorTextField.

from django.db import models
from vditor.fields import VditorTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length = 10)
    content = VditorTextField()

Admin in the background, will automatically display markdown edit rich text.

Used in front-end template, you can use like this:

{% load static %}
<! DOCTYPE html>
<html lang = "en">
    <head>
        <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
    </head>
    <body>
        <form method = "post" action = "./">
            {% csrf_token %}
            {{ form.media }}
            <ul style="display: flex">
                {{ form.as_p }}
            </ul>
            <p> <input type = "submit" value = "post"> </p>
        </form>
    </body>
</html>

Edit fields in the Form using markdown

Use markdown to edit fields in the Form, use VditorTextFormField instead of forms.CharField, as follows:

from vditor.fields import VditorTextFormField

class VditorForm(forms.Form):
    name = forms.CharField()
    content = VditorTextFormField()

ModelForm can automatically convert the corresponding model field to the form field, which can be used normally:

class VditorModleForm(forms.ModelForm):

    class Meta:
        model = ExampleModel
        fields = '__all__'

Use the markdown widget in admin

Use the markdown widget in admin like as :

from django.contrib import admin
from django.db import models

# Register your models here.
from. import models as demo_models
from vditor.widgets import VditorWidget


class ExampleModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': VditorWidget}
    }


admin.site.register(demo_models.ExampleModel, ExampleModelAdmin)

Customize the toolbar

Add the following configuration to settings:

VDITOR_CONFIGS = {
    'default': {
        "width": "100%",
        "height": 360,
        "mode": "ir",  # sv, ir, wysiwyg
        "theme": "classic",  # classic, dark
        "icon": "ant",  # ant, material
        "outline": False,
        "typewriterMode": False,
        "debugger": False,
    }
}

# Security settings (optional)
VDITOR_MAX_FILE_SIZE = 10 * 1024 * 1024  # 10MB
VDITOR_ALLOWED_EXTENSIONS = {'.jpg', '.jpeg', '.png', '.gif', '.webp'}
VDITOR_ALLOWED_MIME_TYPES = {
    'image/jpeg', 'image/png', 'image/gif', 'image/webp'
}

🔧 Advanced Usage

Cache Management

# Warm up caches for better performance
python manage.py vditor_cache warm

# Clear all caches
python manage.py vditor_cache clear

# Check cache status
python manage.py vditor_cache info

Security Configuration

The enhanced version includes comprehensive security features:

File validation: Magic number detection, MIME type checking
Filename sanitization: Path traversal protection, forbidden character filtering
Content scanning: Dangerous pattern detection
Upload limits: Configurable file size and type restrictions

Performance Features

Configuration caching: Reduces database/settings access
File deduplication: Prevents duplicate uploads using content hashing
LRU caching: Widget and media file caching
Atomic operations: Safe file uploads with rollback support

🧪 Testing

# Run all tests
python manage.py test

# Run vditor-specific tests
python manage.py test vditor

# Check code quality
black --check .
flake8 .
mypy .

📈 Code Quality Metrics

Test Coverage: 31/31 tests passing
Type Safety: Complete type annotations
Security: Enhanced upload validation and sanitization
Performance: Multi-level caching implementation
Code Style: Black formatting, PEP 8 compliant

🤝 Contributing

This project has been enhanced with production-ready improvements by Vibe Coding. The codebase now includes:

Comprehensive test suite
Type safety with full annotations
Security best practices
Performance optimizations
Professional error handling

📚 References

Vditor - The underlying editor
django-mdeditor - Original inspiration
Vibe Coding - Code quality enhancements

📄 License

MIT License - see LICENSE file for details.

Enhanced by 🚀 Vibe Coding
Production-ready Django applications with enterprise-grade code quality

Release files for django-vditor 1.1.3

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-vditor 1.1.3
File	Size	Uploaded
django_vditor-1.1.3.tar.gz	13.3 kB	Jul 7, 2025	Details

Built distribution (wheel)

Table of built distributions (wheels) for django-vditor 1.1.3
File	Interpreter	ABI	Platform	Reset
django_vditor-1.1.3-py3-none-any.whl 13.7 kB Jul 7, 2025	Python 3	none	any	Details

Total release size: 27.0 kB

Release files / django_vditor-1.1.3.tar.gz

Download URL	django_vditor-1.1.3.tar.gz
Size	13.3 kB
Tags	Source
SHA-256 checksum How to use checksums	`c52af59e4fbe8031d650dacb0b4418534b12d6dd9fb81479205a0102b38f0f9b`
BLAKE2b-256 checksum How to use checksums	`74dde37897f3bcc9b2d6e12b31709909ce655bcbcb162e7bcfe4cad63a0275d0`
Upload date	Jul 7, 2025
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`twine/6.1.0 CPython/3.12.9`

Provenance

Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.

Identity

Publishing platform: GitHub Actions
Publishing repository: github.com/pi-dal/django-vditor
Publishing commit: github.com/pi-dal/django-vditor/tree/0c2cfc8896507825646055a9d5b3ffe286de52b4

Workflow

Publishing configuration: github.com/pi-dal/django-vditor/blob/0c2cfc8896507825646055a9d5b3ffe286de52b4/.github/workflows/publish.yml
Publishing logs: github.com/pi-dal/django-vditor/actions/runs/16110872200/attempts/1

Artifact

Subject: django_vditor-1.1.3.tar.gz
SHA-256 checksum: c52af59e4fbe8031d650dacb0b4418534b12d6dd9fb81479205a0102b38f0f9b Verifying attestations

Release files / django_vditor-1.1.3-py3-none-any.whl

Download URL	django_vditor-1.1.3-py3-none-any.whl
Size	13.7 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`331a3b04f264569051461bb2cd3d902e95ded8b12c9da9ae688af9a1272ce75f`
BLAKE2b-256 checksum How to use checksums	`59036fe4f7b1305366f7c451ea8afab576d2b1468712ec54bf5a9897d3b10483`
Upload date	Jul 7, 2025
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`twine/6.1.0 CPython/3.12.9`

Provenance

Identity

Publishing platform: GitHub Actions
Publishing repository: github.com/pi-dal/django-vditor
Publishing commit: github.com/pi-dal/django-vditor/tree/0c2cfc8896507825646055a9d5b3ffe286de52b4

Workflow

Publishing configuration: github.com/pi-dal/django-vditor/blob/0c2cfc8896507825646055a9d5b3ffe286de52b4/.github/workflows/publish.yml
Publishing logs: github.com/pi-dal/django-vditor/actions/runs/16110872200/attempts/1

Artifact

Subject: django_vditor-1.1.3-py3-none-any.whl
SHA-256 checksum: 331a3b04f264569051461bb2cd3d902e95ded8b12c9da9ae688af9a1272ce75f Verifying attestations