Django后台和前台使用summernote富文本编辑器

小末快跑

发布于 2019-07-03 17:44:44

2.4K0

发布于 2019-07-03 17:44:44

文章被收录于专栏：日常撸知识

简单介绍一下怎么在django的管理后台和用户使用网页中使用django-summernote富文本编辑器，其他富文本编辑器类似。

一、后台使用富文本编辑器

1.用pip安装django-summernote;

pip install django-summernote

2.在项目的setting中，将django-summernote添加到app中；

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_summernote',
    'user',
]

并在setting.py中添加：

MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

3.在url.py中添加；

首先导入：

from django.views.static import serve

其次在urlpatterns中添加：

path('summernote/', include('django_summernote.urls')),
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),  # 用于上传图片文件，也可以上传其他文件word,ppt等。
path('static/<path:path>', serve, {'document_root': settings.STATIC_ROOT}),  # 用于加载静态文件

通过上面的步骤，接下来就可以在模型models.py中使用summernote富文本编辑器了，

4.models.py中：

首先导入SummernoteTextField，

from django_summernote.fields import SummernoteTextField

创建文章类，并将内容字段作为富文本字段：

class StudyNote(models.Model):
    title = models.CharField('文章标题', max_length=30)
    author = models.CharField('作者', max_length=10, default='admin')
    tag = models.CharField('文章标签', max_length=10)
    content = SummernoteTextField(null=True)
    pub_time = models.DateField('发表日期', auto_now=True)

    #
    class Meta:
        verbose_name = '文章'  # model的名字
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title  # 文章的title

5.在admin.py中注册创建的模型；

使用命令：python manage.py migrate, 以及python manage.py makemigrations创建相应table，

再运行python manage.py runserver

6.打开diango后台，如图所以就可以看见文章内容字段为富文本编辑器，有许多功能可以使用：

二、那么在前台，或者说用户页面中如何使用这个富文本编辑器呢？

有了前面的设置，思路大致相同：

1.在models.py中创建带有SummernoteTextField的字段的类；

class Addblog(models.Model):
   title=models.CharField('文章标题',max_length=30)
   author_name=models.CharField('作者',max_length=20)
   tag=models.CharField('文章标签',max_length=10)
   content=SummernoteTextField('文章内容',null=True)
   pub_time=models.DateField('发表日期',auto_now=True)

2.创建一个form.py；

from django import forms
from user import models
from django_summernote.fields import SummernoteTextField


class BlogForm(forms.ModelForm):
   class Meta:
      model=models.Addblog
      fields='__all__'

3.在url.py中添加；

path('addblog/',views.addblog,name='addblog'),

4.在view.py中编写；

def addblog(request):
   title='添加文章'
   blogform=BlogForm()
   if request.method=='POST':
      title=request.POST.get('title','')
      tag=request.POST.get('tag','')
      author=request.POST.get('author_name','')
      content=request.POST.get('content','')
      blog=StudyNote()
      blog.title=title
      blog.author=author
      blog.tag=tag
      blog.content=content
      blog.save()
      return redirect('/user/index/1/')
   return render(request,'user/addblog.html',locals())

5.创建html文件;

{ % extends "base.html" %}
{ % load static %}
< !DOCTYPE html >

{ % block content %}
< div class ="container" >

< div class ="row" >

< div class ="col-sm-8 col-md-4 col-lg-6" >

<h1> 学习记录 </h1>
{% if tips %}
<div> {{tips}} </div>
{ % endif %}

< form class ='form' action="" method="post">


{ % csrf_token %}
{{blogform.as_p}}
< button class ="btn-lg" type="submit" > 请提交 < / button >

</form >

</div>
<br/>
</div>
</div>
{ % endblock %}

依次运行：python manage.py migrate; python manage.py makemogrations; python manage.py runserver;

6.在浏览器中打开add文章的url，即可看见用户前台富文本的效果，和前面效果相同。