django-mdeditor
django2.0 python3.7 xadmin
** Django-mdeditor** 是基于 Editor.md 的一个 django Markdown 文本编辑插件应用。https://pandao.github.io/editor.md/
1.在xadmin后台使用
git clone https://github.com/pylixm/django-mdeditor
把 mdeditor
文件夹复制到项目中去
然后在你的项目 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='文章标题')
content = MDTextField(verbose_name='文章内容')
class Meta:
db_table = 'article'
verbose_name = '文章列表'
verbose_name_plural = verbose_name
在xadmin后台中使用，到adminx.py中注册
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找到
