测试环境
python:3.6.0
Anaconda:4.3.0
os:win10
django:2.1.4

参考:https://blog.csdn.net/duke10/article/details/81033686

Django整合django-mdeditor

1.安装django-mdeditor

pip install django-mdeditor  

2.在项目的settings.py的INSTALLED_APPS中添加'mdeditor'

INSTALLED_APPS = [  
    'Blog',  
    'django.contrib.admin',  
    'django.contrib.auth',  
    'django.contrib.contenttypes',  
    'django.contrib.sessions',  
    'django.contrib.messages',  
    'django.contrib.staticfiles',  
    'mdeditor',    #富文本编辑器  
]  

3.添加路径到设置中

#settings.py  
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #uploads必须存在,且在项目目录下  
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下  

4.添加设置到url中

#urls.py  
from django.conf.urls import url,include  
from django.conf.urls.static import static  
from django.conf import settings  
from django.contrib import admin  
from django.urls import path,include  

urlpatterns = [  
    path('Blog/',include('Blog.urls')),  
    path('admin/', admin.site.urls),  
    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)  

5.在app中使用

from django.db import models  
from mdeditor.fields import MDTextField   #必须导入  
class Article(models.Model):  
    article_title = models.CharField('title',max_length = 100)  
    article_content = MDTextField('content')   #注意为MDTextField()  
    article_pubdate = models.DateTimeField('date published')  
    article_publisher = models.ForeignKey(User,on_delete=models.CASCADE,verbose_name='publisher')  
    article_class = models.ForeignKey(Class,null=True,blank=True,on_delete=models.CASCADE,verbose_name='class')  
    def __str__(self):  
        return self.article_title  

6.在Blog/admin.py中注册

from django.contrib import admin  
from Blog.models import *  
admin.site.register(Article)  

7.此时在Django的后台管理页面添加或编辑该类时,article_content就可以用markdown编辑并实时预览了。

Django前端显示markdown

1.首先下载markdown

pip install markdown    # 下载时最好使用管理员权限  

2.在views.py中使用:

注意这里使用了3个markdown扩展,extra 本身包含很多拓展,而 codehilite 是语法高亮拓展,这为我们后面的实现代码高亮功能提供基础,而 toc 则允许我们自动生成目录。
前端可能不会为代码换行,为了解决这个问题使用article.content.replace(“\r\n”, ’ \n’)解决,把换行符替换成两个空格+换行符,这样经过markdown转换后才可以转成前端的br标签

from django.shortcuts import render,get_object_or_404  
from .models import Article  
import markdown  
# 文章详情页  
def detail(request,article_id):  
    article = get_object_or_404(Article,pk=article_id)  
    article.article_content = markdown.markdown(article.article_content.replace("\r\n", '  \n'),  
                        extensions=['markdown.extensions.extra',  
                                     'markdown.extensions.codehilite',  
                                     'markdown.extensions.toc',],safe_mode=True,enable_attributes=False)  
    context = {  
        'article':article,  
    }  
    return render(request,'Blog/detail.html',context)  

3.前端显示时必须使用safe过滤器

<div>  
    {{article.article_content | safe}}  
</div>  

4.实现代码高亮
首先安装Pygments

pip install Pygments  

安装完成后运行:

pygmentize -S default -f html -a .codehilite > code.css  

该命令会在命令路径下生成.css文件,code.css还可以换成github.css等。将该css文件放到应用的静态文件夹中。
最后在html页面引入:

{% load static %}  
...  
<link rel="stylesheet" href="{% static 'Blog/github.css' %}" />  

5.现在刷新前端页面,文章内容便以markdown形式展示了。

评论

还没有登陆?评论请先登陆注册
test 2020-04-19 00:50:24

更改id为3

commentor 2020-04-19 00:50:03

更改id为2

hhh 2020-04-19 00:34:03

伪造名称???

yayay 2020-04-19 00:33:36

伪造名称???

nick 2020-04-19 00:30:06

ERROR

test007 2020-04-19 00:25:00

ERROR_BUG_ACCUR

nick 2020-04-19 00:22:25

XSS WELL USR_ID???

nick 2020-04-19 00:10:29

<script>alert('WHUT软件zy前来测试');</script>

test007 2019-04-30 15:18:11

ededede

test007 2019-04-30 15:17:59

12dedd

test 2018-12-24 15:35:18

最后测试一下评论!

test 2018-12-27 08:40:53

回复这条评论。

test 2018-12-24 15:19:31

评论一下!!

test 2018-12-24 15:34:59

回复一下!

test 2018-12-24 15:34:52

测试回复!

yayay 2018-12-24 09:17:47

测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论。 测试一条长评论测试一条长评论测试一条长评论测试一条长评论。测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论。

hhh 2018-12-24 09:18:18

回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。 回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。

commentor 2018-12-22 10:33:21

测试评论

commentor 2018-12-22 10:34:55

测试回复评论

commentor 2018-12-22 08:52:26

测试评论1

commentor 2018-12-24 09:04:31

测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复

hhh 2018-12-24 09:02:14

测试回复1_3

hhh 2018-12-24 09:01:17

测试回复1_2

commentor 2018-12-24 09:00:44

测试回复1

 联系方式 contact me

Github
Email
QQ
Weibo