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
- 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
- π 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
- VditorTextField: Model field with admin integration
- VditorTextFormField: Form field for custom forms
- VditorWidget: Customizable admin widget
- Management Commands: Cache management and optimization tools
- Installation.
# pip
pip install django-vditor
# pipenv
pipenv install django-vditor
# poetry
poetry add django-vditor
# pdm
pdm add django-vditor- Add
vditorto 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 makemigrationsandpython manage.py migrateto create your models. - Login Admin ,you can see a markdown editor text field like this:
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>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 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)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'
}# 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 infoThe 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
- 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
# Run all tests
python manage.py test
# Run vditor-specific tests
python manage.py test vditor
# Check code quality
black --check .
flake8 .
mypy .- 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
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
- Vditor - The underlying editor
- django-mdeditor - Original inspiration
- Vibe Coding - Code quality enhancements
MIT License - see LICENSE file for details.
Enhanced by π Vibe Coding
Production-ready Django applications with enterprise-grade code quality