Django整合markdown编辑器
文章目录
添加相关库
我们把Markdown用于两个地方
后台admin写文章时，需要一个Markdown编辑器
在前端网页显示的时候，需要把Markdown的内容转换成HTML
这是两个不同的功能，我们添加两个新的库
pip install django-mdeditor # 用于后台编辑
pip install markdown # 用于前端显示
后台编辑
这部分用django-mdeditor来实现
在项目 settings.py 的 INSTALLED_APPS 中添加 ’mdeditor’
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog', # 应用：博客功能
'comments', # 应用：评论功能
+ 'mdeditor', # Markdown 编辑器
]
+ 表示加上这行代码
添加路径到 settings.py 中
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') #uploads必须存在，且在项目目录下
MEDIA_URL = '/media/' #你上传的文件和图片会默认存在/uploads/editor下
添加设置到你的 url.py 中
from django.conf.urls import url, include
from django.contrib import admin
from blog.feeds import AllPostsRssFeed
+ from django.conf.urls.static import static
+ from django.conf import settings
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'', include('blog.urls')),
url(r'', include('comments.urls')),
url(r'^all/rss/$', AllPostsRssFeed(), name='rss'),
+ 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)
在models.py中修改你需要Markdown的关键词
class Post(models.Model):
# 文章标题
title = models.CharField(max_length=70)
# 文章正文
body = MDTextField() #修改这个类型
这里把文章正文body用于Markdown
记得在Blog/admin.py中注册，就是把这个功能，放到admin里面
from django.contrib import admin
from .models import Post, Category, Tag
class PostAdmin(admin.ModelAdmin):
list_display = ['title', 'created_time', 'modified_time', 'category', 'author']
admin.site.register(Post, PostAdmin)
admin.site.register(Category)
admin.site.register(Tag)
此时，打开后台admin，编辑界面如下。body部分有了一个Markdown编辑器
image
前端显示
pip install markdown
将 Markdown 格式的文本渲染成 HTML 文本非常简单，只需调用这个库的 markdown 方法即可。
我们书写的博客文章内容存在 Post 的 body 属性里，回到我们的详情页视图函数，对 post 的 body 的值做一下渲染，把 Markdown 文本转为 HTML 文本再传递给模板：
import markdown
from django.shortcuts import render, get_object_or_404
from .models import Post
def detail(request, pk):
post = get_object_or_404(Post, pk=pk)
# 记得在顶部引入 markdown 模块
post.body = markdown.markdown(post.body,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
return render(request, 'blog/detail.html', context={'post': post})
-
markdown.extensions.extra：用于标题、表格、引用这些基本转换 -
markdown.extensions.codehilite：用于语法高亮 -
markdown.extensions.toc：用于生成目录
替换网页模板
在模板中找到展示博客文章主体的 {{ post.body }} 部分，加上 safe过滤器，改为{{ post.body|safe }}
<div>
{{ post.body|safe }}
</div>
代码高亮
要实现代码高亮，我们需要一个样式文件。自己写太艰难了，所以我们用现成的。安装Pygments
pip install Pygments
Pygments自带很多好看的高亮格式
在项目的 blog\static\blog\css\highlights\ 目录下应该能看到很多 .css 样式文件，
这些文件是用来提供代码高亮样式的。
选择一个你喜欢的样式文件，在 templates/base.html 引入即可。
比如引入 default.css 样式
{% load staticfiles %}
...
<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">
...
+ <link rel="stylesheet" href="{% static 'blog/css/highlights/default.css' %}">
换行
在需要换行的位置，输入<br/>即可
关于图片上传
我们在admin编辑器中，可以很方便的插入图片
image
文中刚刚提到了，可以直接上传本地图片，但是更推荐直接上传图片链接，加载速度更快
这里推荐一个免费的七牛云云存储服务器，
具体操作可以点这里用Python把图片上传到七牛云
修改图片大小和位置
上传图片的时候，经常因为图片过大，影响电脑端和手机端显示。
上传的时候，在图片格式后面，加上{:width="100%" align=center}
比如：
{:width="100%" align=center}
这里定义了图片的宽度width是100%匹配于显示，你也可以设置高度。也可以直接设置大小，比如{:width="900"}
align表示图片位置，center表示居中
修改字体和位置
如果你嫌弃默认的Markdown格式不好看，你可以在.css文件里面进行修改（一劳永逸型）
比如自定义标题字号
.box.post h2 {
font-size: 3.25em;
line-height: 1.25em;
}
.box.post h3 {
font-size: 2.25em;
line-height: 1.25em;
}
或者直接在文章里改（每次自己改）
<font face="微软雅黑" color="red" size="6">字体及字体颜色和大小</font>
<font face="微软雅黑" color="red" size="6">字体及字体颜色和大小</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>
