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
pip install django-vditor
pipenv install django-vditor
poetry add django-vditor
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:

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
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",
"theme": "classic",
"icon": "ant",
"outline": False,
"typewriterMode": False,
"debugger": False,
}
}
VDITOR_MAX_FILE_SIZE = 10 * 1024 * 1024
VDITOR_ALLOWED_EXTENSIONS = {'.jpg', '.jpeg', '.png', '.gif', '.webp'}
VDITOR_ALLOWED_MIME_TYPES = {
'image/jpeg', 'image/png', 'image/gif', 'image/webp'
}
🔧 Advanced Usage
Cache Management
python manage.py vditor_cache warm
python manage.py vditor_cache clear
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
python manage.py test
python manage.py test vditor
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
📄 License
MIT License - see LICENSE file for details.
Enhanced by 🚀 Vibe Coding
Production-ready Django applications with enterprise-grade code quality