Django-mdeditor is Markdown Editor plugin application for django base on Editor.md.
Django-mdeditor was inspired by great django-ckeditor.
Note:
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.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. pipenv install django-mdeditor
# or
pip install django-mdeditor
mdeditor to your INSTALLED_APPS setting like this: INSTALLED_APPS = [
...
'mdeditor',
]
X_FRAME_OPTIONS = 'SAMEORIGIN'
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
Make folder uploads/editor in you project for media files.
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)
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 and python manage.py migrate to 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 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>
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 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)
Add the following configuration to settings:
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
}
}
Welcome to use and feedback!
You can create a issue or join in QQ Group.
FAQs
A simple Django app to edit markdown text.
We found that django-mdeditor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.