Package: django-vditor
django-vditordjango-vditoris Markdown Editor plugin application fordjangobase onvditor.django-vditorwas inspired by greatdjango-mdeditor.FeaturesAlmost Vditor featuresSupport 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 renderingBuilt-in security filtering, export, task list, multi-platform preview, multi-theme switching, copy to WeChat official account/Zhuhu functionImplement CommonMark and GFM specifications, format Markdown and view syntax tree, and support 10+ configurationsThe 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 uploadPasted HTML is automatically converted to Markdown. If the pasted includes external link pictures, it can be uploaded to the server through the designated interfaceSupport main window size drag and drop, character countMulti-theme support, built-in three sets of black and white themesMulti-language support, built-in Chinese, English, and Korean text localizationSupport mainstream browsers, friendly to mobileThe 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 startInstallation.# pippipinstalldjango-vditor# pipenvpipenvinstalldjango-vditor# poetrypoetryadddjango-vditor# pdmpdmadddjango-vditorAddvditorto 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:fromdjango.conf.urlsimporturl,includefromdjango.conf.urls.staticimportstaticfromdjango.confimportsettings...urlpatterns=[...path('vditor/',include('vditor.urls'))]ifsettings.DEBUG:urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)Write your models like this:fromdjango.dbimportmodelsfromvditor.fieldsimportVditorTextFieldclassExampleModel(models.Model):name=models.CharField(max_length=10)content=VditorTextField()Register your model inadmin.pyRunpython manage.py makemigrationsandpython manage.py migrateto create your models.Login Admin ,you can see a markdown editor text field like this:UsageEdit fields in the model using MarkdownUsing Markdown to edit the fields in the model, we simply replace theTextFieldof the model withVditorTextField.fromdjango.dbimportmodelsfromvditor.fieldsimportVditorTextFieldclassExampleModel(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><htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset = utf-8"/></head><body><formmethod="post"action="./">{% csrf_token %}
            {{ form.media }}<ulstyle="display: flex">{{ form.as_p }}</ul><p><inputtype="submit"value="post"></p></form></body></html>Edit fields in the Form using markdownUse markdown to edit fields in the Form, useVditorTextFormFieldinstead offorms.CharField, as follows:fromvditor.fieldsimportVditorTextFormFieldclassVditorForm(forms.Form):name=forms.CharField()content=VditorTextFormField()ModelFormcan automatically convert the corresponding model field to the form field, which can be used normally:classVditorModleForm(forms.ModelForm):classMeta:model=ExampleModelfields='__all__'Use the markdown widget in adminUse the markdown widget in admin like as :fromdjango.contribimportadminfromdjango.dbimportmodels# Register your models here.from.importmodelsasdemo_modelsfromvditor.widgetsimportVditorWidgetclassExampleModelAdmin(admin.ModelAdmin):formfield_overrides={models.TextField:{'widget':VditorWidget}}admin.site.register(demo_models.ExampleModel,ExampleModelAdmin)Customize the toolbarAdd the following configuration tosettings: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}}Referencedjango-mdeditor