ckeditor富文本编辑器(Django 3.2)

最新推荐文章于 2024-07-16 17:59:12 发布

云淡风轻58

最新推荐文章于 2024-07-16 17:59:12 发布

阅读量743

点赞数 1

分类专栏： Django 文章标签： django python ckeditor

本文链接：https://blog.csdn.net/dwenxue/article/details/120658485

版权

Django 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

安装ckeditor

pip install django-ckeditor

如图：

安装pillow

pillow是python的一个图像处理库

pip install pillow

如图：

在项目seetings.py中配置ckeditor

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ckeditor',
    'ckeditor_uploader',
]

媒体文件配置并在项目根目录创建media文件夹

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

同样在项目urls.py中配置

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include


urlpatterns = [
    path('ckeditor/', include('ckeditor_uploader.urls')),
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

创建app

django-admin.py startapp user
django-admin.py startapp index

接下来在 settings.py 中找到INSTALLED_APPS这一项，如下：

INSTALLED_APPS = [
    'user',
    'index',
]

在APP里分别新建urls.py并修改项目的urls.py

urlpatterns = [
    path('', include('index.urls')),
    path('user/',include('user.urls')),
]

在user.models.py创建模型

from django.db import models
from django.contrib.auth.models import AbstractUser

class Admin(AbstractUser):
    nickname = models.CharField('昵称', max_length=10)
    phone = models.CharField('手机', max_length=20)
    mail = models.CharField('邮箱', max_length=20)
    createDate = models.DateField('创建时间', auto_now_add=True)

在index.models.py创建模型

class Blog(models.Model):
    title = models.CharField(max_length=50)
    author = models.ForeignKey(Admin, on_delete=models.CASCADE, verbose_name='作者')
    createdTime = models.DateTimeField('发布时间', auto_now_add=True)
    content=RichTextUploadingField(verbose_name='正文')

    class Meta:
        verbose_name = '文章'
        verbose_name_plural = '文章'

    def __str__(self):
        return self.title

在项目MyBlog.setting.py中添加自定义用户模型

AUTH_USER_MODEL = 'user.Admin'

数据库迁移

python manage.py makemigrations   # 让 Django 知道我们在我们的模型有一些变更
python manage.py migrate # 创建表结构

创建admin超级用户

# python manage.py createsuperuser
Username (leave blank to use 'root'): admin
Email address: admin@runoob.com
Password:
Password (again):
Superuser created successfully.

在项目根目录创建templates



<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <meta charset="utf-8">
  <title>登录</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
  <link rel="stylesheet" href="{% static 'style/admin.css' %}" media="all">
  <link rel="stylesheet" href="{% static 'style/login.css' %}" media="all">
</head>
<body>


  <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
      <div class="layadmin-user-login-box layadmin-user-login-header">
        <h2>系统登录</h2>
      </div>

      <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
        <form class="layui-form" action="/user/loginCheck/" method="post">
        {% csrf_token %}
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
          <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
        </div>
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
          <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
        </div>
        <div class="layui-form-item" style="margin-bottom: 20px;">
          <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
          <a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 陆</button>
        </div>
        <div class="layui-trans layui-form-item layadmin-user-login-other">
          <label>社交账号登入</label>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
        </div>
        </form>
      </div>

    </div>
    
    <div class="layui-trans layadmin-user-login-footer">
      <p>© 2018</p>
    </div>
    
    <!--<div class="ladmin-user-login-theme">
      <script type="text/html" template>
        <ul>
          <li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
          <li data-theme="#03152A" style="background-color: #03152A;"></li>
          <li data-theme="#2E241B" style="background-color: #2E241B;"></li>
          <li data-theme="#50314F" style="background-color: #50314F;"></li>
          <li data-theme="#344058" style="background-color: #344058;"></li>
          <li data-theme="#20222A" style="background-color: #20222A;"></li>
        </ul>
      </script>
    </div>-->
    
  </div>
<script src="{% static 'layui/layui.js' %}"></script>
 <script type="text/javascript">
		layui.use('form', function() {
			var form = layui.form;
			form.render('select');
		});
        var res='{{ res }}';
		if(res=='fail'){
			layui.use('layer', function(){
				  var layer = layui.layer;
				  layer.msg('用户名或密码错误');
				});

		}
		if(res=='error'){
			layui.use('layer', function(){
				  var layer = layui.layer;
				  layer.msg('请先登录再访问');
				});

		}
        if(res=='ok'){
			layui.use('layer', function(){
				  var layer = layui.layer;
				  layer.msg('登录成功');
				});

		}
 </script>
</body>
</html>

addBlog.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>Ckeditor编辑器</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
</head>
<body>
<div class="layui-fluid" style="margin-top: 10px;">
    <form class="layui-form" method="post" action="/save/" enctype="multipart/form-data">
        {% csrf_token %}
            <div class="layui-form-item layui-col-xs6">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" width="300px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                  <select name="category" >
                    <option value="">请选择</option>
                   {% for c in categorys %}
                    <option value="{{ c.categoryName }}">{{ c.categoryName }}</option>
                   {% endfor %}
                  </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text layui-col-xs6">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                  {{ blogForm.content }}
                  {{ blogForm.media }}
                  {{ blogForm.body }}
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">发布</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    </form>
</div>
<script src="{% static 'layui/layui.js' %}"></script>
<script type="text/javascript">
    layui.use('form', function(){
      var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
      var res = '{{ res }}';
		if (res == 'ok') {
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.msg('操作成功');
			});

		}
		if (res == 'fail') {
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.msg("操作成功");
			});
		}
      form.render();
    });
</script>
</body>
</html>

在index.admin.py注册模型

from django.contrib import admin
from index.models import Blog

@admin.register(Blog)
class BlogAdmin(admin.ModelAdmin):
    list_display = ('title','content')
    fields = ('title','content')

前端使用ckeditor需要用到django的forms，在index应用里新建一个forms.py

from ckeditor_uploader.widgets import CKEditorUploadingWidget
from django import forms
from index.models import Blog

class BlogForm(forms.ModelForm):
    content=forms.CharField(widget=CKEditorUploadingWidget,label='详情',required=True)

    class Meta:
        model=Blog
        fields = "__all__"

index.views.py编写登录、发表博客视图函数

from index.models import Blog
from user.models import Admin

def loginView(request):
    return render(request, 'login.html')

def addBlogView(request):
    blogForm=BlogForm()
    return render(request, 'addBlog.html',{'blogForm':blogForm})

编辑index.urls

urlpatterns = [
    path('login/', views.loginView),
    path('addBlog/', views.addBlogView),
]

登录验证视图函数user.views

from django.contrib import auth
from django.shortcuts import render, redirect

def loginCheckView(request):
    username = request.POST['username']
    password = request.POST['password']
    user = auth.authenticate(username=username, password=password)
    if not user:
        res = 'fail'
        return render(request, 'login.html', locals())
    else:
        auth.login(request, user)
        res = 'ok'
        request.session['user'] = username
        return redirect("/user")

编辑user.urls

urlpatterns = [
    path('loginCheck/', views.loginCheckView),
]

使用超级用户登录后台

添加博客

上传图片

成功插入图片

打开项目media文件夹下的upload

云淡风轻58

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
ckeditor富文本编辑器(Django 3.2)

安装ckeditorpip install django-ckeditor如图：安装pillowpillow是python的一个图像处理库pip install pillow如图：在项目seetings.py中配置ckeditorINSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'dj..
复制链接

扫一扫