django-vditor is Markdown Editor plugin application for django base on vditor.
django-vditor was inspired by great django-mdeditor.
- 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.
- 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:
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 = { # 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
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent