https://github.com/pi-dal/django-vditor
A WYSIWYG editor plugin made by vditor for django
https://github.com/pi-dal/django-vditor
django django-application editor wysiwyg
Last synced: 4 months ago
JSON representation
A WYSIWYG editor plugin made by vditor for django
- Host: GitHub
- URL: https://github.com/pi-dal/django-vditor
- Owner: pi-dal
- License: mit
- Created: 2021-02-08T11:13:26.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-07-07T02:43:08.000Z (4 months ago)
- Last Synced: 2025-07-07T02:44:45.443Z (4 months ago)
- Topics: django, django-application, editor, wysiwyg
- Language: TypeScript
- Homepage: https://django-vditor.pi-dal.com/
- Size: 4.95 MB
- Stars: 16
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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.
```bash
# 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:
```python
INSTALLED_APPS = [
...
'vditor',
]
```
- add frame settings for django3.0+ like thisοΌ
```python
X_FRAME_OPTIONS = 'SAMEORIGIN'
```
- Add 'media' url to your settings like this:
```python
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
```
- Add url to your urls like this:
```python
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:
```python
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`.
```python
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:
```html
{% load static %}
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
```
### Edit fields in the Form using markdown
Use markdown to edit fields in the Form, use `VditorTextFormField` instead of` forms.CharField`, as follows:
```python
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:
```python
class VditorModleForm(forms.ModelForm):
class Meta:
model = ExampleModel
fields = '__all__'
```
### Use the markdown widget in admin
Use the markdown widget in admin like as :
```python
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`:
```python
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
```bash
# 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
```bash
# 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](https://www.vibecoding.com). The codebase now includes:
- Comprehensive test suite
- Type safety with full annotations
- Security best practices
- Performance optimizations
- Professional error handling
## π References
- [Vditor](https://github.com/Vanessa219/vditor) - The underlying editor
- [django-mdeditor](https://github.com/pylixm/django-mdeditor) - Original inspiration
- [Vibe Coding](https://www.vibecoding.com) - Code quality enhancements
## π License
MIT License - see [LICENSE](LICENSE) file for details.
---
Enhanced by π Vibe Coding
Production-ready Django applications with enterprise-grade code quality