django-mdeditor
django2.0 python3.7 xadmin
** Django-mdeditor** 是基于 Editor.md 的一個(gè) django Markdown 文本編輯插件應(yīng)用趣效。https://pandao.github.io/editor.md/
1.在xadmin后臺(tái)使用
git clone https://github.com/pylixm/django-mdeditor
把 mdeditor
文件夾復(fù)制到項(xiàng)目中去
然后在你的項(xiàng)目 setting.py 中添加該模塊
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'mdeditor',
'article',
)
article模塊中model.py
from django.db import models
from mdeditor.fields import MDTextField
class Article(models.Model):
title = models.CharField(max_length=100, null=False, verbose_name='文章標(biāo)題')
content = MDTextField(verbose_name='文章內(nèi)容')
class Meta:
db_table = 'article'
verbose_name = '文章列表'
verbose_name_plural = verbose_name
在xadmin后臺(tái)中使用，到adminx.py中注冊(cè)
import xadmin
from django.db import models
from article.models import Article
from mdeditor.widgets import MDEditorWidget
class ArticleAdmin(object):
list_display = ['title', 'desc']
formfield_overrides = {
models.TextField: {'widget': MDEditorWidget}
}
xadmin.site.register(Article, ArticleAdmin)
md_editor.PNG
2.在前端使用
新建forms.py
from django import forms
from mdeditor.fields import MDTextFormField
from article.models import Article
class MDEditorModleForm(forms.ModelForm):
class Meta:
model = Article
fields = '__all__'
在view.py
from django.http import HttpResponse
from django.shortcuts import render
from django.urls import reverse
from django.views import generic
# Create your views here.
import markdown
from article import models
from article import forms
def show_article(request):
art = models.Article.objects.get(pk=1)
art.content = markdown.markdown(art.content, extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
return render(request, 'article/show_article.html', {'art':art})
class MDEditorModleForm(generic.CreateView):
form_class = forms.MDEditorModleForm
template_name = 'article/editor_article.html'
def get_success_url(self):
return reverse('article:edit')
mdeditor_model_form_view = MDEditorModleForm.as_view()
然后主路由url.py
from user import views
import xadmin
urlpatterns = [
path('admin/', xadmin.site.urls),
path('mdeditor/', include('mdeditor.urls')),
path('p/', include('article.urls', namespace='article')),
]
再 article下url.py
from django.urls import path
from article.views import show_article, mdeditor_model_form_view
app_name = 'article'
urlpatterns = [
path('show/', show_article, name='show'),
path('edt/', mdeditor_model_form_view, name='edit'),
]
在模板template文件夾建html模板
show_article.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="{% static 'css/mdcss/editormd.preview.min.css' %}">
<link href="{% static 'css/mdcss/code.css' %}">
<script src="{% static 'js/mdjs/jquery.min.js' %}"></script>
<script src="{% static 'js/mdjs/marked.min.js' %}"></script>
<script src="{% static 'js/mdjs/prettify.min.js' %}"></script>
<script src="{% static 'js/mdjs/raphael.min.js' %}"></script>
<script src="{% static 'js/mdjs/underscore.min.js' %}"></script>
<script src="{% static 'js/mdjs/sequence-diagram.min.js' %}"></script>
<script src="{% static 'js/mdjs/flowchart.min.js' %}"></script>
<script src="{% static 'js/mdjs/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'js/mdjs/editormd.min.js' %}"></script>
</head>
<body>
<div id="editormd-view">
<p > {{ art.content|safe }}</p>
</div>
</body>
</html>
模板中引入的css和js可以在https://github.com/pandao/editor.md找到
