测试环境
python:3.6.0
Anaconda:4.3.0
os:win10
django:2.1.4
参考:https://blog.csdn.net/duke10/article/details/81033686
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编辑并实时预览了。
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形式展示了。
更改id为3
更改id为2
伪造名称???
伪造名称???
ERROR
ERROR_BUG_ACCUR
XSS WELL USR_ID???
<script>alert('WHUT软件zy前来测试');</script>
ededede
12dedd
最后测试一下评论!
回复这条评论。
评论一下!!
回复一下!
测试回复!
测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论。 测试一条长评论测试一条长评论测试一条长评论测试一条长评论。测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论测试一条长评论。
回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。 回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。回复长评论。
测试评论
测试回复评论
测试评论1
测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复测试一个长回复
测试回复1_3
测试回复1_2
测试回复1
a
--
123456789
更改id为3
--
test
更改id为2
--
commentor
伪造名称???
--
hhh
伪造名称???
--
yayay