django-vditor
django-vditor is Markdown Editor plugin application for django base on vditor.
django-vditor was inspired by great django-mdeditor.
Features
- Almost Vditor features
- Support three editing modes: what you see is what you get (wysiwyg), instant rendering (ir), split screen preview (sv)
- Support outline, mathematical formulas, brain maps, charts, flowcharts, Gantt charts, timing charts, staff, multimedia, voice reading, title anchors, code highlighting and copying, graphviz rendering
- Built-in security filtering, export, task list, multi-platform preview, multi-theme switching, copy to WeChat official account/Zhuhu function
- Implement CommonMark and GFM specifications, format Markdown and view syntax tree, and support 10+ configurations
- The toolbar contains 36+ operations. In addition to supporting extensions, you can customize the shortcut keys, prompts, prompt locations, icons, click events, class names, and sub-toolbars in each item.
- You can use drag and drop, clipboard to paste upload, display real-time upload progress, and support CORS cross-domain upload
- Pasted HTML is automatically converted to Markdown. If the pasted includes external link pictures, it can be uploaded to the server through the designated interface
- Support main window size drag and drop, character count
- Multi-theme support, built-in three sets of black and white themes
- Multi-language support, built-in Chinese, English, and Korean text localization
- Support mainstream browsers, friendly to mobile
- The VditorTextField field is provided for the model and can be displayed directly in the django admin.
- The VditorTextFormField is provided for the Form and ModelForm.
- The VditorWidget is provided for the Admin custom widget.
Quick start
- Installation.
# pip
pip install django-vditor
# pipenv
pipenv install django-vditor
# poetry
poetry add django-vditor
# pdm
pdm add django-vditor- Add
vditorto 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 makemigrationsandpython manage.py migrateto 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.
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 = { # remember to write "' '"
'default':{
"width": "%90", # use numbers or percentages
"height": 360, # use numbers
"preview_theme": "light", # can fill in dark, light, wechat
"typewriterMode": "True", # whether to enable typewriter mode
"mode": "ir", # optional modes: sv, ir, wysiwyg
"debugger": "false", # whether to show log
"value": "", # editor initialization value
"theme": "classic", # can fill in classic, dark
"icon": "ant", # canfill in ant, material
"outline": "false", # show outline
}
}