Package: django-mdeditor
django-mdeditorDjango-mdeditoris Markdown Editor plugin application fordjangobase onEditor.md.Django-mdeditorwas inspired by greatdjango-ckeditor.Note:For Markdown page rendering issues, backend rendering is recommended. BecauseEditor.mdhas not been updated for a long time, some bugs and compatibility issues need to be debugged. Of course, front-end students can choose.Regarding theJqueryconflict, it cannot be deleted because it is required by the admin backend. It is recommended to separate the editing page on a single page or a full screen directly, using its own static file to distinguish it from other pages.FeaturesAlmost Editor.md featuresSupport Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Search replace, Themes, Multi-languages;Markdown Extras : Support ToC (Table of Contents), Emoji;Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;Can constom Editor.md toolbarThe MDTextField field is provided for the model and can be displayed directly in the django admin.The MDTextFormField is provided for the Form and ModelForm.The MDEditorWidget is provided for the Admin custom widget.Quick startInstallation.pipenvinstalldjango-mdeditor# orpipinstalldjango-mdeditorAddmdeditorto your INSTALLED_APPS setting like this:INSTALLED_APPS=[...'mdeditor',]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/'Make folderuploads/editorin you project for media files.Add url to your urls like this:fromdjango.conf.urlsimporturl,includefromdjango.conf.urls.staticimportstaticfromdjango.confimportsettings...urlpatterns=[...url(r'mdeditor/',include('mdeditor.urls'))]ifsettings.DEBUG:# static files (images, css, javascript, etc.)urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)Write your models like this:fromdjango.dbimportmodelsfrommdeditor.fieldsimportMDTextFieldclassExampleModel(models.Model):name=models.CharField(max_length=10)content=MDTextField()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 withMDTextField.fromdjango.dbimportmodelsfrommdeditor.fieldsimportMDTextFieldclassExampleModel(models.Model):name=models.CharField(max_length=10)content=MDTextField()Admin in the background, will automatically display markdown edit rich text.Used in front-end template, you can use like this:{%loadstaticfiles%}<!DOCTYPEhtml><htmllang="en"><head><metahttp-equiv="Content-Type"content="text / html; charset = utf-8"/></head><body><formmethod="post"action="./">{%csrf_token%}{{form.media}}{{form.as_p}}<p><inputtype="submit"value="post"></p></form></body></html>Edit fields in the Form using markdownUse markdown to edit fields in the Form, useMDTextFormFieldinstead offorms.CharField, as follows:frommdeditor.fieldsimportMDTextFormFieldclassMDEditorForm(forms.Form):name=forms.CharField()content=MDTextFormField()ModelFormcan automatically convert the corresponding model field to the form field, which can be used normally:classMDEditorModleForm(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_modelsfrommdeditor.widgetsimportMDEditorWidgetclassExampleModelAdmin(admin.ModelAdmin):formfield_overrides={models.TextField:{'widget':MDEditorWidget}}admin.site.register(demo_models.ExampleModel,ExampleModelAdmin)Customize the toolbarAdd the following configuration tosettings:MDEDITOR_CONFIGS={'default':{'width':'90% ',# Custom edit box width'height':500,# Custom edit box height'toolbar':["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","goto-line","|","help","info","||","preview","watch","fullscreen"],# custom edit box toolbar'upload_image_formats':["jpg","jpeg","gif","png","bmp","webp"],# image upload format type'image_folder':'editor',# image save the folder name'theme':'default',# edit box theme, dark / default'preview_theme':'default',# Preview area theme, dark / default'editor_theme':'default',# edit area theme, pastel-on-dark / default'toolbar_autofixed':True,# Whether the toolbar capitals'search_replace':True,# Whether to open the search for replacement'emoji':True,# whether to open the expression function'tex':True,# whether to open the tex chart function'flow_chart':True,# whether to open the flow chart function'sequence':True,# Whether to open the sequence diagram function'watch':True,# Live preview'lineWrapping':False,# lineWrapping'lineNumbers':False,# lineNumbers'language':'zh'# zh / en / es}}FeedbackWelcome to use and feedback!You can create aissueor join in QQ Group.Referencedjango-ckeditor