ckeditor富文本编辑器(Django 3.2)

清疚 2022-09-14 14:25 238阅读 0赞

安装ckeditor

pip install django-ckeditor

如图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16][]

安装pillow

pillow是python的一个图像处理库

pip install pillow

如图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

在项目**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>
    <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),
    ]

使用超级用户登录后台

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

添加博客

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

上传图片

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

成功插入图片

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 5][] 打开项目media文件夹下的upload

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/864450beaa0844ceae4c0a341800033e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/1974a2186389433d97a5bb233eb3b0de.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/29333af6df20480ea5e6b37c0df3df34.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/37b0abfa263940a2849f9f34ce379d91.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/658276604b614761a9654c36e710dc95.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/1d2e57d5f5204456b44bc428603bc4d1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/daa15988608b44b68e1b847b69820156.png