Django| 给你博客装个Markdown编辑器

简介: Django| 给你博客装个Markdown编辑器

小白学Django系列:

前言

最近自己在开发一个blog,因为比较喜欢用Markdown来写文章,而且目前很多平台都支持Markdown的语法,所以想给blog装个Markdown的编辑器。于是,就搜了一下,发现了django-mdeditor这个库,给大家分享一下。


简单介绍

Github地址:

https://github.com/pylixm/django-mdeditor

Django-mdeditor是基于Editor.md的一个django Markdown 文本编辑插件应用。

Django-mdeditor的灵感参考自项目 django-ckeditor

https://github.com/django-ckeditor/django-ckeditor


后端编辑器使用

1.安装相关库


pip install django-mdeditor  # 用于后台编辑
pip install markdown # 用于前端显示


首先大家先安装这两个库,django-mdeditor库就是用在我们管理后台的md编辑器,markdown则是在前端显示时使用。


2.配置

安装完两个库后,我们需要进行相关的配置。


1.jpg


新增setting配置:


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'mdeditor',
]


除了配置上面的信息,还需要配置资源文件夹:


MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/media/editor下


以为就完了?不,你还需要去url进行配置:


2.jpg


大家把我打红框的代码弄上去就ok了

这时,我们就大概配置完成了。


3.使用Markdown


4.jpg


此时只需要在model中填写相应的属性,即可调用该编辑器。

当然,在进入管理页面之前,你需要在admin中进行注册


admin.site.register(Acticle) # Acticle 是我文章的model名


打开后台之后,我们就会发现Markdown编辑器出现了:


5.jpg


我们在这里插入的图片或者上传的文件都会在media文件夹中,这个文件夹在上面配置中提到,必须要有!!!


前端使用

我们使用了Markdown编辑器编写的文章在前端显示时,必须得将Markdown语法“翻译”成富文本的形式,所以这里我们需要使用到markdown这个库。


视图函数


pip install markdown


我们书写的博客文章内容存在Post的body属性里,回到我们的详情页视图函数,对post的body 的值做一下渲染,把Markdown文本转为HTML文本再传递给模板:


import markdown
from django.shortcuts import render, get_object_or_404
from .models import Post
def post_article(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})


可能有些朋友不懂get_object_or_404方法,给大家简单介绍一下get_object_or_404:我们原来调用django 的get方法(model.object.get()),如果查询的对象不存在的话,会抛出一个DoesNotExist的异常,现在我们调用django get_object_or_404方法,它会默认的调用django 的get方法,如果查询的对象不存在的话,会抛出一个Http404的异常,我感觉这样对用户比较友好,如果用户查询某个产品不存在的话,我们就显示404的页面给用户,比直接显示异常好。

markdown.extensions.extra: 用于标题、表格、引用这些基本转换

markdown.extensions.codehilite: 用于语法高亮

markdown.extensions.toc: 用于生成目录


替换网页模板

在模板中找到展示博客文章的地方加上如下代码,注意这里需要使用safe过滤器。


<div>
    {{ post.body|safe }}
</div>


通过这样就能够显示md语法的文章了


总结

在开发过程中遇到的一个小需求就分享给大家,当然我介绍的只是mdeditor的一部分知识,mdeditor还有一些相关的配置,这里我就没给大家说了,大家可以去GitHub上自行看他们的官方文档,顺便也可以去star一下!

相关文章
|
3月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
151 1
Linux系统之部署轻量级Markdown文本编辑器
|
2月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
84 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
5月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
195 0
|
4月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
5月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
|
7月前
|
Linux C++ 开发者
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
480 0
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
199 45
|
2月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
72 2
|
4月前
|
机器学习/深度学习 人工智能 算法
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
植物病害识别系统。本系统使用Python作为主要编程语言,通过收集水稻常见的四种叶片病害图片('细菌性叶枯病', '稻瘟病', '褐斑病', '稻瘟条纹病毒病')作为后面模型训练用到的数据集。然后使用TensorFlow搭建卷积神经网络算法模型,并进行多轮迭代训练,最后得到一个识别精度较高的算法模型,然后将其保存为h5格式的本地模型文件。再使用Django搭建Web网页平台操作界面,实现用户上传一张测试图片识别其名称。
152 22
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面