πŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more β†’
Socket
Book a DemoInstallSign in
Socket

django-vditor

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

django-vditor

A WYSIWYG editor plugin made by vditor for django

1.1.3
PyPI
Maintainers
1

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

Keywords

django

FAQs

Did you know?

Socket

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.

Install

Related posts