django集成markdown编辑器并实现代码高亮显示

最新推荐文章于 2023-03-03 11:53:57 发布

stu_xujin

最新推荐文章于 2023-03-03 11:53:57 发布

阅读量2.4k

点赞数 6

分类专栏： django

本文链接：https://blog.csdn.net/xujin0/article/details/91618433

版权

django 专栏收录该内容

45 篇文章 14 订阅

订阅专栏

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

安装

pip install 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',

    'mdeditor',   # 富文本编辑器mdeditor
]

添加MEDIA的相关配置，在settings.py文件中添加

MEDIA_ROOT = os.path.join(BASE_DIR,'uploads')    # mdeditor编辑器上传图片之后存放的文件夹
MEDIA_URL = '/media/'

如果按照上面的配置，那么最后mdeditor上传的图片就会上传到：项目根目录（BASE_DIR）/uploads/editor文件夹下面

添加设置到我们的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

urlpatterns = [
    path('admin/',admin.site.urls),
    path('mdeditor/', include('mdeditor.urls')),
]

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

到现在为止，我们的配置过程就好了，然后我们既可以开始使用了

添加一个app，blog

python manage.py startapp blog

然后我们在blog下的models.py文件中写入一个Blog模型

from django.db import models
from mdeditor.fields import MDTextField    # 导入这个字段

# Create your models here.
class Blog(models.Model):
    title = models.CharField(max_length=100)
    content = MDTextField()

然后执行下面两条命令，将模型映射到数据库中区

python manage.py makemigrations
python manage.py migrate

然后我们注册到django中,在blog/admin.py中写入

from django.contrib import admin
# Register your models here.
from . import models

admin.site.register(models.Blog)

查看效果

到这一步，我们就可以进入django自带的admin后台查看前面我们的成果了，我们点击增加Blog按钮,就能够进入编辑界面，看到我们的编辑器了
在这里插入图片描述

这个时候，我们已经将markdown编辑器整合到admin后台中了，但是我们并不能在我们自己的html文件中显示这个编辑器。接下来我们来在自己的html文件中显示mdeditor编辑器.。

在自定义的html文件中显示mdeditor编辑器

首先我们新建一个视图，在blog/views.py文件中写入代码

from django.shortcuts import render
from mdeditor.fields import MDTextFormField
from django import forms
from django.views.generic import View
# Create your views here.

class BlogForm(forms.Form):
    content = MDTextFormField()

class Blog(View):
    def get(self,request):
        form = BlogForm()
        return render(request,'blog.html',{'form':form})

然后再主urls.py文件中添加url

from Blog.views import Blog

urlpatterns = [
    path('admin/',admin.site.urls),
    path('mdeditor/', include('mdeditor.urls')),
    path('blog/',Blog.as_view())
]

然后我们新建一个blog.html文件，放再根目录下的templates文件夹下面
写入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    {{ form.media }}
</head>
<body>

<div class="editor">
    <form action="" method="post">
    	{% csrf_token %}
        <label for="title">标题:</label>
        <input name="title" type="text" id="title"><br>
        {{ form.as_p }}
        <input type="submit" value="提交">
    </form>
</div>

</body>
</html>

这样，我们输入url就能看到mdeditor编辑器了
在这里插入图片描述

至此，我们已经能在任何地方显示我们的编辑器了，那么我们怎样将得到的内容显示在前台呢

显示内容到前端页面

首先安装markdown

pip install markdown

然后我们先完善我们的Blog这个类视图，然后添加一个显示blog详情的视图,编辑blog/views.py文件

from django.shortcuts import render
from mdeditor.fields import MDTextFormField
from django import forms
from django.views.generic import View
from Blog.models import Blog
from django.shortcuts import HttpResponse
import markdown
# Create your views here.


class BlogForm(forms.Form):
    content = MDTextFormField()

class Blog(View):
    def get(self,request):
        form = BlogForm()
        return render(request,'blog.html',{'form':form})

    def post(self,request):
        title = request.POST.get('title')
        content = request.POST.get('content')
        Blog.objects.create(title=title,content=content)
        return HttpResponse('success')

def blog_detail(request,blog_id):
    try:
        blog = Blog.objects.get(pk=int(blog_id))
    except:
        return HttpResponse('该blog不存在')
    blog.content = markdown.markdown(blog.content,extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    return render(request,'detail.html',{'blog':blog})

然后配置显示blog详细信息的url,在主urls.py文件中添加url

from Blog.views import Blog,blog_detail

urlpatterns = [
    path('admin/',admin.site.urls),
    path('mdeditor/', include('mdeditor.urls')),
    path('blog/',Blog.as_view())
    path('blog_detail/<int:blog_id>',blog_detail)
]

这样，我们就完善好了我们的mdeditor编辑器，并且能将内容存取到数据库中去
首先我们先自己编写一点内容做测试，使用admin后台的编辑器或者我们自己blog.html页面的编辑器都可以
然后提交。

然后我们就可以输入url来看到我们的blog详情页面了
例如输入 127.0.0.1:8000/blog_detail/1/

但是，如果我们blog中的content中有代码的话，在页面显示并没有高亮，这个时候我们就还需要想做一些事情了。

代码内容显示高亮

我们首先需要安装Pygments，然后激活虚拟环境。

安装

pip install Pygments

激活虚拟环境

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

然后我们就会发现生成了一个code.css文件，将这个css文件加入到我们的static文件夹下面（路径无所谓，只需要自己引用正确就可以了）

然后我们在detail.html文件中导入这个文件

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

我们在前面的markdown下也必须加入markdown.extensions.codehilite，在前面我们已经添加了。

然后我们刷新页面，我们blog中代码部分也会高亮显示了。

至此，我们django整合markdown语法并显示高亮也已经整合完毕了

最后，django-mdeditor也提供了一个接口，允许我们做一些配置。

我们只需要在settings.py文件中写入MDEDITOR_CONFIGS这个变量就行了。

默认的MDEDITOR_CONFIGS配置如下

英语为官网给的注释，汉字为我自己的理解。

MDEDITOR_CONFIGS = {
    'default':{
        'width': '90% ',  # Custom edit box width  宽度，整个页面的百分之多少
        'heigth': 500,  # Custom edit box height   高度，单位为px
        'toolbar': ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime"
                    "emoji", "html-entities", "pagebreak", "goto-line", "|",
                    "help", "info",
                    "||", "preview", "watch", "fullscreen"],  # custom edit box toolbar   工具栏 
        'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  # image upload format type  允许上传的图片 的格式，不在这个里面的格式将不允许被上传
        'image_floder': 'editor',  # image save the folder name   上传图片后存放的目录，BASE_DIR/MEDIA_ROOT/editor
        'theme': 'default',  # edit box theme, dark / default  mdeditor主题，dark/default两种
        'preview_theme': 'default',  # Preview area theme, dark / default  内容显示区主题 dark/default
        'editor_theme': 'default',  # edit area theme, pastel-on-dark / default   文本编辑区主题  pastel-on-dark / default
        'toolbar_autofixed': True,  # Whether the toolbar capitals
        'search_replace': True,  # Whether to open the search for replacement  是否打开搜索替换
        'emoji': True,  # whether to open the expression function  是否允许使用emoji表情
        'tex': True,  # whether to open the tex chart function   是否打开tex图表功能
        'flow_chart': True,  # whether to open the flow chart function   是否打开流程图功能
        'sequence': True  # Whether to open the sequence diagram function   是否打开序列图函数
    }
}

参考链接:

stu_xujin

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
django集成markdown编辑器并实现代码高亮显示

使用django-mdeditorgitgub的地址：https://github.com/pylixm/django-mdeditor安装pip install django-mdeditor在项目settings.py文件中的INSTALLED_APPS中添加 ‘mdeditor’INSTALLED_APPS = [ 'django.contrib.admin',...
复制链接

扫一扫

专栏目录