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
# pip
pip install django-vditor
# pipenv
pipenv install django-vditor
# poetry
poetry add django-vditor
# pdm
pdm add django-vditor
vditor to your INSTALLED_APPS setting like this: INSTALLED_APPS = [
...
'vditor',
]
X_FRAME_OPTIONS = 'SAMEORIGIN'
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
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)
from django.db import models
from vditor.fields import VditorTextField
class ExampleModel(models.Model):
name = models.CharField(max_length=10)
content = VditorTextField()
admin.pypython manage.py makemigrations and python manage.py migrate to create your models.
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 info
The enhanced version includes comprehensive security features:
# Run all tests
python manage.py test
# Run vditor-specific tests
python manage.py test vditor
# Check code quality
black --check .
flake8 .
mypy .
This project has been enhanced with production-ready improvements by Vibe Coding. The codebase now includes:
MIT License - see LICENSE file for details.
Enhanced by 🚀 Vibe Coding
Production-ready Django applications with enterprise-grade code quality
FAQs
A WYSIWYG editor plugin made by vditor for django
We found that django-vditor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.