djiango引入django-ckeditor-5-0.2.20 modelform表单

pip install django-ckeditor-5

setting.py

先注册

python 复制代码
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    'index_app',
    'comtent_app',
    'django_ckeditor_5',

]
python 复制代码
import os
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "ckeditor_img"
CKEDITOR_IMAGE_BACKEND = 'pillow'



# 编辑器配置
CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': [
            'heading', '|', 'bold', 'italic', 'link',
            'bulletedList', 'numberedList', 'blockQuote',
            '|', 'imageUpload', 'insertTable', '|', 'undo', 'redo',
        ],
        'image': {
            'toolbar': ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side'],
            'styles': ['full', 'side'],
        },
        'language': 'zh-cn',
    },
}



#不用登入后台考级上传
CKEDITOR_5_FILE_UPLOAD_PERMISSION = "all"

models.py

python 复制代码
from django.db import models
from django_ckeditor_5.fields import CKEditor5Field


class UserInfo2(models.Model):
    name=models.CharField(max_length=10,verbose_name='姓名')
    gender_choice=(
        (1,'男'),
        (2,'女')
    )
    gender=models.SmallIntegerField(verbose_name='性别',choices=gender_choice)
    salary=models.DecimalField(verbose_name='收入',max_digits=10,decimal_places=2,default=0)
    phone=models.CharField(verbose_name='电话号码',max_length=11,null=True,blank=True)
    create_time=models.DateTimeField(verbose_name='入职时间')
    content2 = CKEditor5Field('个人简介', config_name='default',null=True,blank=True)

    class Meta:
        verbose_name = '用户信息'  # 单数显示
        verbose_name_plural = '用户信息'  # 复数显示,不写默认会加 s

views.py

python 复制代码
from django_ckeditor_5.widgets import CKEditor5Widget
from  django import forms
class User2ListForm(forms.ModelForm):
    class  Meta:
        model = models.UserInfo2
        fields = "__all__"
        widgets = {
            'content2': CKEditor5Widget(config_name='default')
        }
    #
    # def __init__(self, *args, **kwargs):
    #     super().__init__(*args, **kwargs)
    #     for name,field in self.fields.items():
    #         field.widget.attrs = {'class': 'form-control'}


def userinfo2_add(request):
    if request.method=='GET':
        content={
            'gender_choice':models.UserInfo2.gender_choice
        }
        return render(request,'userinfo2/add.html',content)
    name=request.POST.get('name')
    age=request.POST.get('age')
    gender=request.POST.get('gender')
    salary=request.POST.get('salary')
    phone=request.POST.get('phone')
    create_time=request.POST.get('create_time')
    print(name,age,gender,salary,phone,create_time)
    models.UserInfo2.objects.create(name=name,age=age,gender=gender,salary=salary,phone=phone,create_time=create_time)
    return redirect('/index/userinfo2list')

add2.html

python 复制代码
{% extends 'layout/layout.html' %}
{% load static %}
{% block content %}

<link href="{% static 'django_ckeditor_5/dist/styles.css' %}" media="all" rel="stylesheet">
    
<script src="{% static 'django_ckeditor_5/dist/bundle.js'%}"></script>
<script src="{% static 'django_ckeditor_5/dist/translations/zh-cn.js'%}"></script>    
<div class="container">
   <form method="post" novalidate  enctype="multipart/form-data">
       {% csrf_token %}
       {{ form.media }}
       {%  for field in form %}
         <div class="form-group">
            <label>{{ field.label }}</label>
            {{ field }}
            <span style="color: red">{{ field.errors.0 }}</span>
          </div>

       {% endfor %}
  <button type="submit" class="btn btn-default">Submit</button>


   </form>
</div>
{% endblock %}
相关推荐
我的xiaodoujiao1 天前
Django 基础知识详细图文教程 15-Django 内置Admin系统
后端·python·django
我的xiaodoujiao1 天前
Django 基础知识详细图文教程 16-Django 内置Admin认证系统
后端·python·django
Wx-bishekaifayuan2 天前
springboot桂味美食分享系统40540-计算机课程设计、毕业设计
spring boot·后端·python·django·课程设计·express·旅游
梅雅达编程笔记2 天前
Day 06 · 第一个 API 接口:从 Model 到 JSON
python·django·drf·后端开发·restful api·序列化器
高级程序源3 天前
django校园寻物通失物招领平台32261-计算机课程设计、毕业设计
vue.js·python·mysql·小程序·django·flask·课程设计
WeiXin_DZbishe3 天前
基于springboot宠物领养系统-计算机毕设 附源码【课程设计】94217
vue.js·spring boot·python·django·php·课程设计
Wx-bishekaifayuan3 天前
springboot汉中旅游服务平台41442-计算机课程设计、毕业设计
spring boot·后端·python·django·课程设计·express·旅游
高级程序源4 天前
springboot社区旧物回收管理系统25381-计算机课程设计、毕业设计
vue.js·spring boot·python·django·课程设计
高级程序源4 天前
springboot大学生体测系统72170-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·django·课程设计