A simple Django app to edit markdown text.
Project description
django-mdeditor
Django-mdeditor is Markdown Editor plugin application for django base on Editor.md.
Django-mdeditor was inspired by great django-ckeditor.
Note:
- For Markdown page rendering issues, backend rendering is recommended. Because
Editor.md
has not been updated for a long time, some bugs and compatibility issues need to be debugged. Of course, front-end students can choose. - Regarding the
Jquery
conflict, 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.
Features
- Almost Editor.md features
- Support 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 toolbar
- The 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 start
- Installation.
pipenv install django-mdeditor
# or
pip install django-mdeditor
- Add
mdeditor
to 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 folder uploads/editor
in you project for media files.
- 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 = [ ... url(r'mdeditor/', include('mdeditor.urls')) ] if settings.DEBUG: # static files (images, css, javascript, etc.) urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
- Write your models like this:
from django.db import models from mdeditor.fields import MDTextField class ExampleModel(models.Model): name = models.CharField(max_length=10) content = MDTextField()
-
Register your model in
admin.py
-
Run
python manage.py makemigrations
andpython manage.py migrate
to 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 MDTextField
.
from django.db import models from mdeditor.fields import MDTextField class ExampleModel (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:
{% load staticfiles%} <! 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}} {{form.as_p}} <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 MDTextFormField
instead of forms.CharField
, as follows:
from mdeditor.fields import MDTextFormField class MDEditorForm (forms.Form): name = forms.CharField () content = MDTextFormField ()
ModelForm
can automatically convert the corresponding model field to the form field, which can be used normally:
class MDEditorModleForm (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 mdeditor.widgets import MDEditorWidget class ExampleModelAdmin (admin.ModelAdmin): formfield_overrides = { models.TextField: {'widget': MDEditorWidget} } admin.site.register (demo_models.ExampleModel, ExampleModelAdmin)
Customize the toolbar
Add the following configuration to settings
:
MDEDITOR_CONFIGS = { 'default':{ 'width': '90% ', # Custom edit box width 'heigth': 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 } }
Feedback
Welcome to use and feedback!
You can create a issue or join in QQ Group.
Reference
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Filename, size | File type | Python version | Upload date | Hashes |
---|---|---|---|---|
Filename, size fs-django-mdeditor-0.1.24.tar.gz (1.5 MB) | File type Source | Python version None | Upload date | Hashes View |
Hashes for fs-django-mdeditor-0.1.24.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | bbddc77ec23f30aa29d7c1fd70d0eb6fdd563bcd7b6b53091a43d8f48be13349 |
|
MD5 | 2bfd8ecf8366115143fa4707219b5599 |
|
BLAKE2-256 | 57ebc958a3c6f50a75096e270bbae81e517ad063a92bf3105f12927be3de73eb |