Django使用Djangoueditor富文本编辑器（附校园寝室管理系统）

第一步 下载Djangoueditor压缩包

解压到项目目录

下载地址：https://github.com/zhangfisher/DjangoUeditor

第二步 安装DjangoUeditor

这个库好长时间不更新了，不支持py3了需要自己改改才能用

如果觉得下载慢或者下载不下来的话，可以尝试换源，下面说一下换源的操作，如果觉得没用的话可以跳过。

1、点击加号

2、点击manage repositories

3、点击加号，将下面的url填进去

http://mirrors.aliyun.com/pypi/simple/
https://pypi.tuna.tsinghua.edu.cn/simple/
https://pypi.douban.com/simple/

第三步 配置文件settings.py中注册DjangoUeditor

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'first',
    'user',
    'mysite',
    'repair',
    'score',
    'DjangoUeditor',
]

第四步 配置DjangoUeditor相对应的url，在项目的主url文件中添加

from django.urls import path,include,re_path
urlpatterns = [
    re_path(r'^ueditor/', include('DjangoUeditor.urls')),
]

第五步 （非必须）新建一个app

在项目终端输入命令：python manage.py startapp 应用名
如：

第六步 创建model

from django.db import models
# Create your models here.
from DjangoUeditor.models import UEditorField
class Artival(models.Model):
    Name=models.CharField(max_length=100,blank=True)
    Content=UEditorField(u'内容	',width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},settings={},command=None,blank=True)
    class Meta:
        db_table = 'artical'  # 指明数据库表名
        verbose_name = '文章'  # 在admin站点中显示的名称
        verbose_name_plural = verbose_name  # 显示的复数名称

    def __str__(self):
        """定义每个数据对象的显示信息"""
        return self.Name

第六步 在Django自带后台使用

from django.contrib import admin
from ueditor import models
from DjangoUeditor.models import UEditorField
# Register your models here.
class ArtivalAdmin(admin.ModelAdmin):
    list_display = ( 'Name','Content', )
admin.site.register(models.Artival, ArtivalAdmin)

第七步 生成迁移文件创建数据库表

生成迁移文件 python manage.py makemigrations
同步到数据库中 python manage.py migrate

查看数据库，表创建成功

第八步 登录Django后台查看是否才可以创建成功

终端输入：python manage.py runserver 8888
在浏览器输入：http://127.0.0.1:8888/admin/

第九步 配置视图

1、forms

from django import forms
from  DjangoUeditor.forms import UEditorField
from myapp.models import Excludes,Replace,Artival
class TestUEditorForm(forms.Form):
    Name = forms.CharField(label='题目', max_length=100, error_messages={
        'required': '请填写题目',
        'max_length': '题目太长...'
    })
    Description=UEditorField("描述",width=600,height=800,)

2、urls

主urls

    # ueditor app
    path('ueditor/', include('ueditor.urls')),

ueditor app urls

from django.urls import path,re_path
from django.contrib import admin
admin.autodiscover()
from ueditor import views as score_view

urlpatterns = [
    path('article-list/', score_view.select_article_all),
    path('article-add/', score_view.add_artival),
]

3、views

from django.shortcuts import render
from ueditor.models import Artival
from ueditor.forms import TestUEditorForm
def select_article_all(request):
    info_list = Artival.objects.all()
    return render(request, 'artical/artival-list.html', locals())
def add_artival(request):
    if request.method == 'POST':
        # 接受request.POST参数构造form类的实例
        forms = TestUEditorForm(request.POST)
        # 验证数据是否合法
        if forms.is_valid():
            # 处理form.cleaned_data中的数据
            Name = forms.cleaned_data['Name']
            Content = forms.cleaned_data['Description']
            new_info = Artival.objects.create(Name=Name, Content=Content, )
            if new_info is not None:
                info_list = Artival.objects.all()
                return render(request, 'artical/artival-list.html', locals())
            else:
                forms = TestUEditorForm(request.POST)
                return render(request, 'artical/addnews.html', locals())
        # 如果是通过GET方法请求数据，返回一个空的表单
    else:
        forms = TestUEditorForm(request.POST)
        return render(request, 'artical/addnews.html', locals())

4、templates

artival-list.html

{% extends "index.html" %}
{% load static %}
　
{% block content %}
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">

                            <form action="/repair/repair-list-part/" class="layui-form layui-col-space5" method="POST">
                                {% csrf_token %}
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="id" name="id" >
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="标题" name="name" >
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;
                                </div>
                            </form>

                        </div>
                        <div class="layui-card-header">

                            <a href="/ueditor/article-add/" class="layui-btn"><i class="layui-icon"></i>添加</a>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                  <tr>
                                    <th>
                                      id<input type="checkbox" lay-filter="checkall" name="id" value="id" lay-skin="primary">
                                    </th>
                                    <th>标题</th>
                                    <th>内容</th>
                                    <th>操作</th></tr>
                                </thead>
                                <tbody>
                                {% for item in info_list %}
                                <tr>
                                    <td>{{ item.id }}</td>
                                    <td>{{ item.Name }}</td>
                                    <td>{{ item.Content }}</td>
                                    <td class="td-manage">
<!--                                      <a onclick="member_stop(this,'10001')" href="javascript:;"  title="启用">-->
<!--                                        <i class="layui-icon">&#xe601;-->
<!--                                      </a>-->
                                      <a title="编辑"  href="/repair/repair-updata-id/{{ item.id }}">
                                        <i class="layui-icon">&#xe642;
                                      </a>
<!--                                      <a onclick="xadmin.open('修改密码','member-password.html',600,400)" title="修改密码" href="javascript:;">-->
<!--                                        <i class="layui-icon">&#xe631;-->
<!--                                      </a>-->
                                      <a title="删除"  href="/repair/repair-del-id/{{ item.id }}">
                                        <i class="layui-icon">&#xe640;
                                      </a>
                                    </td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-card-body ">
                            <div class="page">
                                <div>
                                  <a class="prev" href="">&lt;&lt;</a>
                                  <a class="num" href="">1</a>
                                  <span class="current">2</span>
                                  <a class="num" href="">3</a>
                                  <a class="num" href="">489</a>
                                  <a class="next" href="">&gt;&gt;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}

addnews.html

{% extends "index.html" %}
{% load static %}
　
{% block content %}

 <form class="" action="/ueditor/article-add/" method="POST">
     <input type="submit"><br>
     {% csrf_token %}
     {% block forms_style %}

{{ forms.media }}  {# 这里是加载djangoueditor相关的js、css文件，否则页面不显示富文本编辑器 #}
{% endblock %}
{% for field in forms%}
{{ field.label_tag }} {{ field }}<br><br>
{% endfor %}
</form>
{% endblock %}

第十步运行检查

学生寝室管理github地址：https://github.com/lofxve/Django
学生寝室管理er图

部分功能如图：

由于我的水平有限，文章中难免有不妥和错误之处，真诚的希望路过的大佬，能在评论区批评指正。