在Django中安装Markdown编辑器

django-mdeditor
django2.0 python3.7 xadmin

---

Github地址:https://github.com/pylixm/django-mdeditor

** 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 %}



    
    
    
    

    
    
    
    
    
    
    
    
    



    
 {{ art.content|safe }}

模板中引入的css和js可以在https://github.com/pandao/editor.md找到

参考文献

本文参考:
漂亮的 Django Markdown 富文本 app 插件

Django集成Markdown编辑器【附源码】