{"id":15180644,"url":"https://github.com/pi-dal/django-vditor","last_synced_at":"2025-07-31T22:23:52.920Z","repository":{"id":40325559,"uuid":"337049866","full_name":"pi-dal/django-vditor","owner":"pi-dal","description":"A WYSIWYG editor plugin made by vditor for django","archived":false,"fork":false,"pushed_at":"2025-07-07T02:43:08.000Z","size":5188,"stargazers_count":16,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-07T02:44:45.443Z","etag":null,"topics":["django","django-application","editor","wysiwyg"],"latest_commit_sha":null,"homepage":"https://django-vditor.pi-dal.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pi-dal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-08T11:13:26.000Z","updated_at":"2025-07-07T02:42:16.000Z","dependencies_parsed_at":"2023-01-17T00:15:38.141Z","dependency_job_id":null,"html_url":"https://github.com/pi-dal/django-vditor","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/pi-dal/django-vditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pi-dal%2Fdjango-vditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pi-dal%2Fdjango-vditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pi-dal%2Fdjango-vditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pi-dal%2Fdjango-vditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pi-dal","download_url":"https://codeload.github.com/pi-dal/django-vditor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pi-dal%2Fdjango-vditor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268126613,"owners_count":24200292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-application","editor","wysiwyg"],"created_at":"2024-09-27T16:40:21.002Z","updated_at":"2025-07-31T22:23:52.909Z","avatar_url":"https://github.com/pi-dal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003edjango-vditor\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/pi-dal/figure-bed@master/3A0F231C-4FF4-4041-A571-2CAA20CA5030.png\" width=\"450\" align=\"middle\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003edjango-vditor\u003c/strong\u003e is a production-ready Markdown Editor plugin application for \u003ca href=\"https://github.com/django/django\"\u003edjango\u003c/a\u003e base on \u003ca href=\"https://github.com/Vanessa219/vditor\"\u003evditor\u003c/a\u003e.\n\u003cbr\u003e\n\u003cstrong\u003edjango-vditor\u003c/strong\u003e was inspired by great \u003ca href=\"https://github.com/pylixm/django-mdeditor\"\u003edjango-mdeditor\u003c/a\u003e.\n\u003cbr\u003e\n\u003cstrong\u003e✨ Enhanced with \u003ca href=\"https://www.vibecoding.com\"\u003eVibe Coding\u003c/a\u003e - Production-ready code quality and security improvements\u003c/strong\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003ca title=\"python-version\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor\"\u003e\u003cimg alt=\"python-version\" src=\"https://img.shields.io/badge/python-3.10+-purple.svg\"\u003e\u003c/a\u003e\n\u003ca title=\"django-version\" target=\"_blank\" href=\"https://www.djangoproject.com/\"\u003e\u003cimg alt=\"django-version\" src=\"https://img.shields.io/badge/django-5.2+-green.svg\"\u003e\u003c/a\u003e\n\u003ca title=\"vibe-coding\" target=\"_blank\" href=\"https://www.vibecoding.com\"\u003e\u003cimg alt=\"vibe-coding\" src=\"https://img.shields.io/badge/enhanced%20by-Vibe%20Coding-orange.svg\"\u003e\u003c/a\u003e\n\u003ca title=\"last-commit\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor/commits/main\"\u003e\u003cimg src=\"https://img.shields.io/github/last-commit/pi-dal/django-vditor?color=blue\"\u003e\u003c/a\u003e \n\u003ca title=\"pdm-managed\" target=\"_blank\" href=\"https://github.com/frostming/pdm\"\u003e\u003cimg src=\"https://img.shields.io/badge/pdm-managed-blueviolet\"\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003ca title=\"Codacy-Badge\" target=\"_blank\" href=\"https://www.codacy.com/gh/pi-dal/django-vditor/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=pi-dal/django-vditor\u0026amp;utm_campaign=Badge_Grade\"\u003e\u003cimg src=\"https://img.shields.io/codacy/grade/d23000f233344a9891189a816b58f9b1\"\u003e\u003c/a\u003e\n\u003ca title=\"Codacy-Coveralls-Badge\" target=\"_blank\" href=\"https://www.codacy.com/gh/pi-dal/django-vditor/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=pi-dal/django-vditor\u0026utm_campaign=Badge_Coverage\"\u003e\u003cimg src=\"https://img.shields.io/codacy/coverage/d23000f233344a9891189a816b58f9b1\"\u003e\u003c/a\u003e\n\u003ca title=\"pypi\" target=\"_blank\" href=\"https://pypi.org/manage/project/django-vditor/releases\"\u003e\u003cimg src=\"https://img.shields.io/pypi/v/django-vditor\"\u003e\u003c/a\u003e\u003cbr\u003e\n\u003ca title=\"license\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/pi-dal/django-vditor\"/\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003ca title=\"GitHub-Watchers\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor/watchers\"\u003e\u003cimg src=\"https://img.shields.io/github/watchers/pi-dal/django-vditor.svg?label=Watchers\u0026style=social\"\u003e\u003c/a\u003e  \n\u003ca title=\"GitHub-Stars\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/pi-dal/django-vditor.svg?label=Stars\u0026style=social\"\u003e\u003c/a\u003e  \n\u003ca title=\"GitHub-Forks\" target=\"_blank\" href=\"https://github.com/pi-dal/django-vditor/network/members\"\u003e\u003cimg src=\"https://img.shields.io/github/forks/pi-dal/django-vditor.svg?label=Forks\u0026style=social\"\u003e\u003c/a\u003e  \n\u003ca title=\"Author-GitHub-Followers\" target=\"_blank\" href=\"https://github.com/pi-dal\"\u003e\u003cimg src=\"https://img.shields.io/github/followers/pi-dal.svg?label=Followers\u0026style=social\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n### 🎯 Core Vditor Features\n- **Three editing modes**: WYSIWYG, Instant Rendering (IR), Split Screen Preview (SV)\n- **Rich content support**: Mathematical formulas, diagrams, charts, flowcharts, Gantt charts, multimedia\n- **Advanced functionality**: Outline, syntax highlighting, code copying, graphviz rendering\n- **Export capabilities**: Multiple formats with built-in security filtering\n- **Customizable toolbar**: 36+ operations with full customization support\n- **Upload support**: Drag \u0026 drop, clipboard paste, real-time progress, CORS support\n- **Multi-platform**: Responsive design, mobile-friendly, mainstream browser support\n- **Internationalization**: Built-in Chinese, English, Korean localization\n\n### ⚡ Production-Ready Enhancements (by Vibe Coding)\n- **🔒 Enhanced Security**: File validation, content sanitization, path traversal protection\n- **🚀 Performance Optimization**: Multi-level caching, file deduplication, LRU caching\n- **📝 Type Safety**: Complete TypeScript-style type hints for better IDE support\n- **🛡️ Error Handling**: Comprehensive logging, graceful fallbacks, detailed error messages\n- **🔧 Management Tools**: Django management commands for cache operations\n- **📊 Code Quality**: Black formatting, comprehensive test suite, security best practices\n\n### 🧩 Django Integration\n- **VditorTextField**: Model field with admin integration\n- **VditorTextFormField**: Form field for custom forms\n- **VditorWidget**: Customizable admin widget\n- **Management Commands**: Cache management and optimization tools\n\n## 🚀 Quick Start\n\n- Installation.\n\n```bash\n    # pip\n    pip install django-vditor\n    # pipenv\n    pipenv install django-vditor\n    # poetry\n    poetry add django-vditor\n    # pdm\n    pdm add django-vditor\n```\n\n- Add `vditor` to your INSTALLED_APPS setting like this:\n\n```python\n    INSTALLED_APPS = [\n        ...\n        'vditor',\n    ]\n```\n\n- add frame settings for django3.0+ like this：\n\n```python\nX_FRAME_OPTIONS = 'SAMEORIGIN'\n```\n\n- Add 'media' url to your settings like this:\n\n```python\nMEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')\nMEDIA_URL = '/media/'\n\n```\n\n- Add url to your urls like this:\n\n```python\nfrom django.conf.urls import url, include\nfrom django.conf.urls.static import static\nfrom django.conf import settings\n...\n\nurlpatterns = [\n    ...\n    path('vditor/', include('vditor.urls'))\n]\n\nif settings.DEBUG:\n    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\n\n```\n\n- Write your models like this:\n\n```python\nfrom django.db import models\nfrom vditor.fields import VditorTextField\n\nclass ExampleModel(models.Model):\n    name = models.CharField(max_length=10)\n    content = VditorTextField()\n```\n\n- Register your model in `admin.py`\n- Run `python manage.py makemigrations` and `python manage.py migrate` to create your models.\n- Login Admin ,you can see a markdown editor text field like this:\n\n![django-vditor](https://github.com/pi-dal/figure-bed/blob/master/django-vditor.gif?raw=true)\n\n## Usage\n\n### Edit fields in the model using Markdown\n\nUsing Markdown to edit the fields in the model, we simply replace the `TextField` of the model with` VditorTextField`.\n\n```python\nfrom django.db import models\nfrom vditor.fields import VditorTextField\n\nclass ExampleModel(models.Model):\n    name = models.CharField(max_length = 10)\n    content = VditorTextField()\n```\n\nAdmin in the background, will automatically display markdown edit rich text.\n\nUsed in front-end template, you can use like this:\n\n```html\n{% load static %}\n\u003c! DOCTYPE html\u003e\n\u003chtml lang = \"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta http-equiv = \"Content-Type\" content = \"text/html; charset = utf-8\" /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cform method = \"post\" action = \"./\"\u003e\n            {% csrf_token %}\n            {{ form.media }}\n            \u003cul style=\"display: flex\"\u003e\n                {{ form.as_p }}\n            \u003c/ul\u003e\n            \u003cp\u003e \u003cinput type = \"submit\" value = \"post\"\u003e \u003c/p\u003e\n        \u003c/form\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n### Edit fields in the Form using markdown\n\nUse markdown to edit fields in the Form, use `VditorTextFormField` instead of` forms.CharField`, as follows:\n\n```python\nfrom vditor.fields import VditorTextFormField\n\nclass VditorForm(forms.Form):\n    name = forms.CharField()\n    content = VditorTextFormField()\n```\n\n`ModelForm` can automatically convert the corresponding model field to the form field, which can be used normally:\n\n```python\nclass VditorModleForm(forms.ModelForm):\n\n    class Meta:\n        model = ExampleModel\n        fields = '__all__'\n```\n\n### Use the markdown widget in admin\n\nUse the markdown widget in admin like as :\n\n```python\nfrom django.contrib import admin\nfrom django.db import models\n\n# Register your models here.\nfrom. import models as demo_models\nfrom vditor.widgets import VditorWidget\n\n\nclass ExampleModelAdmin(admin.ModelAdmin):\n    formfield_overrides = {\n        models.TextField: {'widget': VditorWidget}\n    }\n\n\nadmin.site.register(demo_models.ExampleModel, ExampleModelAdmin)\n```\n\n### Customize the toolbar\n\nAdd the following configuration to `settings`:\n\n```python\nVDITOR_CONFIGS = {\n    'default': {\n        \"width\": \"100%\",\n        \"height\": 360,\n        \"mode\": \"ir\",  # sv, ir, wysiwyg\n        \"theme\": \"classic\",  # classic, dark\n        \"icon\": \"ant\",  # ant, material\n        \"outline\": False,\n        \"typewriterMode\": False,\n        \"debugger\": False,\n    }\n}\n\n# Security settings (optional)\nVDITOR_MAX_FILE_SIZE = 10 * 1024 * 1024  # 10MB\nVDITOR_ALLOWED_EXTENSIONS = {'.jpg', '.jpeg', '.png', '.gif', '.webp'}\nVDITOR_ALLOWED_MIME_TYPES = {\n    'image/jpeg', 'image/png', 'image/gif', 'image/webp'\n}\n```\n\n## 🔧 Advanced Usage\n\n### Cache Management\n\n```bash\n# Warm up caches for better performance\npython manage.py vditor_cache warm\n\n# Clear all caches\npython manage.py vditor_cache clear\n\n# Check cache status\npython manage.py vditor_cache info\n```\n\n### Security Configuration\n\nThe enhanced version includes comprehensive security features:\n\n- **File validation**: Magic number detection, MIME type checking\n- **Filename sanitization**: Path traversal protection, forbidden character filtering\n- **Content scanning**: Dangerous pattern detection\n- **Upload limits**: Configurable file size and type restrictions\n\n### Performance Features\n\n- **Configuration caching**: Reduces database/settings access\n- **File deduplication**: Prevents duplicate uploads using content hashing\n- **LRU caching**: Widget and media file caching\n- **Atomic operations**: Safe file uploads with rollback support\n\n## 🧪 Testing\n\n```bash\n# Run all tests\npython manage.py test\n\n# Run vditor-specific tests\npython manage.py test vditor\n\n# Check code quality\nblack --check .\nflake8 .\nmypy .\n```\n\n## 📈 Code Quality Metrics\n\n- **Test Coverage**: 31/31 tests passing\n- **Type Safety**: Complete type annotations\n- **Security**: Enhanced upload validation and sanitization\n- **Performance**: Multi-level caching implementation\n- **Code Style**: Black formatting, PEP 8 compliant\n\n## 🤝 Contributing\n\nThis project has been enhanced with production-ready improvements by [Vibe Coding](https://www.vibecoding.com). The codebase now includes:\n\n- Comprehensive test suite\n- Type safety with full annotations\n- Security best practices\n- Performance optimizations\n- Professional error handling\n\n## 📚 References\n\n- [Vditor](https://github.com/Vanessa219/vditor) - The underlying editor\n- [django-mdeditor](https://github.com/pylixm/django-mdeditor) - Original inspiration\n- [Vibe Coding](https://www.vibecoding.com) - Code quality enhancements\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003eEnhanced by \u003ca href=\"https://www.vibecoding.com\"\u003e🚀 Vibe Coding\u003c/a\u003e\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eProduction-ready Django applications with enterprise-grade code quality\u003c/em\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpi-dal%2Fdjango-vditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpi-dal%2Fdjango-vditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpi-dal%2Fdjango-vditor/lists"}