前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django后台和前台使用summernote富文本编辑器

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

作者头像
小末快跑
发布2019-07-03 17:44:44
2.4K0
发布2019-07-03 17:44:44
举报
文章被收录于专栏:日常撸知识

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

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

1.用pip安装django-summernote;

代码语言:javascript
复制
pip install django-summernote

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

代码语言:javascript
复制
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中添加:

代码语言:javascript
复制
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

3.在url.py中添加;

首先导入:

代码语言:javascript
复制
from django.views.static import serve

其次在urlpatterns中添加:

代码语言:javascript
复制
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,

代码语言:javascript
复制
from django_summernote.fields import SummernoteTextField

创建文章类,并将内容字段作为富文本字段:

代码语言:javascript
复制
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的字段的类;

代码语言:javascript
复制
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;

代码语言:javascript
复制
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中添加;

代码语言:javascript
复制
path('addblog/',views.addblog,name='addblog'),

4.在view.py中编写;

代码语言:javascript
复制
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文件;

代码语言:javascript
复制
{ % 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,即可看见用户前台富文本的效果,和前面效果相同。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小末快跑 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档