A WYSIWYG editor plugin made by vditor for django

Navigation

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for pi-dal from gravatar.com pi-dal
Meta

Unverified details

These details have not been verified by PyPI
Meta
  • License: MIT
  • Tags django , editor , django-application
  • Requires: Python >=3.10
Report project as malware

Project description

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

python-version django-version vibe-coding


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

📄 License

MIT License - see LICENSE file for details.

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

Project details

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for pi-dal from gravatar.com pi-dal
Meta

Unverified details

These details have not been verified by PyPI
Meta
  • License: MIT
  • Tags django , editor , django-application
  • Requires: Python >=3.10

Release history Release notifications | RSS feed

This version

1.1.3

1.1.1

1.1.0

1.0.1

1.0.1b0 pre-release

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_vditor-1.1.3.tar.gz (13.3 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_vditor-1.1.3-py3-none-any.whl (13.7 kB view details)

Uploaded Python 3

File details

Details for the file django_vditor-1.1.3.tar.gz.

File metadata

  • Download URL: django_vditor-1.1.3.tar.gz
  • Upload date:
  • Size: 13.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.12.9

File hashes

Hashes for django_vditor-1.1.3.tar.gz
Algorithm Hash digest
SHA256 c52af59e4fbe8031d650dacb0b4418534b12d6dd9fb81479205a0102b38f0f9b
MD5 fe3c6050d5e05617af472b4ce5012a1a
BLAKE2b-256 74dde37897f3bcc9b2d6e12b31709909ce655bcbcb162e7bcfe4cad63a0275d0

See more details on using hashes here.

Provenance

The following attestation bundles were made for django_vditor-1.1.3.tar.gz:

Publisher: publish.yml on pi-dal/django-vditor

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file django_vditor-1.1.3-py3-none-any.whl.

File metadata

  • Download URL: django_vditor-1.1.3-py3-none-any.whl
  • Upload date:
  • Size: 13.7 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.12.9

File hashes

Hashes for django_vditor-1.1.3-py3-none-any.whl
Algorithm Hash digest
SHA256 331a3b04f264569051461bb2cd3d902e95ded8b12c9da9ae688af9a1272ce75f
MD5 30007efafb3564215bc7cef505b433b5
BLAKE2b-256 59036fe4f7b1305366f7c451ea8afab576d2b1468712ec54bf5a9897d3b10483

See more details on using hashes here.

Provenance

The following attestation bundles were made for django_vditor-1.1.3-py3-none-any.whl:

Publisher: publish.yml on pi-dal/django-vditor

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page