django-ckeditor富文本编辑插件：使用RichTextUploadingField在admin后台显示不了富文本框

已于 2023-10-06 01:07:00 修改
阅读量304 收藏 1
点赞数 1
文章标签： django python 后端
于 2023-09-27 11:59:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43573931/article/details/133276566
版权

前言：环境一致是复现代码的前提。
本次实验环境：python 3.7，Django 3.2.21，django-ckeditor 6.3.2

注：请看到末尾

学习到django-ckeditor富文本这一节时，按照步骤：

  1. pip install django-ckeditor

  2. settings.py中配置：

    INSTALLED_APPS = [
    'show',      # 你的App
    'ckeditor',  # 普通富文本框
    'ckeditor_uploader'  # 可以上传文件的富文本框
]

MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"
CKEDITOR_UPLOAD_PATH = "article_images"  

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full'
    }
}
CKEDITOR_ALLOW_NONIMAGE_FILES = False   # 不允许非图片文件上传： 即只能上传图片
CKEDITOR_BROWSE_SHOW_DIRS = True

    别忘了新建文件夹/media/article_images，media与应用文件夹show同级
    在这里插入图片描述

  3. 配置路由（关于总url中富文本编辑器的路由信息，请参考文末进行修正！）

    # 总urls.py
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('show.urls')),
    # 媒体资源路由
    re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
    # 设置编辑器的路由信息
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

  4. 更改模型字段

    # show应用的models.py
class ArticleInfo(models.Model):
    content = RichTextUploadingField(verbose_name='内容')

  5. 在admin后台注册编辑文章的入口：

    # show应用的admin.py
from django.contrib import admin
from .models import *

@admin.register(ArticleInfo)
class ArticleInfoAdmin(admin.ModelAdmin):
    list_display = ['content']

  6. 数据迁移，创建superuser账户，登录后台，发现content字段并没有变成富文本框（RichTextUploadingField不行 ，但是普通富文本框RichTextField能正常显示，不过我需要的是可以上传文件的前者）
    在这里插入图片描述
    **

解答：

大多数答案都没有标注环境版本，找了很久才找到线索：How to add CkEditor in django
在这里插入图片描述

降低版本: pip install django-ckeditor==6.0.0 成功显示富文本框，并且能成功上传文件

在这里插入图片描述
在这里插入图片描述

在寻找解决方案的过程中，我还做了以下尝试并找到了另一种更复杂的解决方法：
注：原工程有点庞大，为了缩短篇幅，现将django-ckeditor所涉及到的代码单独挑出来做成demo（去掉自定义登录注册等功能）

思路：不降低django-ckeditor的版本，使用模型表单

很多答案都提到了表单，反正前端也要做一个文本编辑框让普通用户写博客，何不用模型表单？

  1. 安装django-ckeditor（同上）

  2. settings.py配置（同上）

  3. 定义model（同上）

  4. 定义forms

    from django import forms
# from ckeditor.widgets import CKEditorWidget  # 普通富文本框
from ckeditor_uploader.widgets import CKEditorUploadingWidget  # 可以上传文件的富文本框
from .models import ArticleInfo

class PostAdminForm(forms.ModelForm):
	# content = forms.CharField(widget=CKEditorWidget())        # 普通富文本框
    content = forms.CharField(widget=CKEditorUploadingWidget()) # 可以上传文件的富文本框
    class Meta:
        model = ArticleInfo
        fields = '__all__'

  5. 两个urls （关于总url中富文本编辑器的路由信息，请参考文末进行修正！）

    # 总urls.py 参考文末进行修改
...
# myapp.urls.py
urlpatterns = [
    path('h.html', article, name='article'),
]

  6. views.py

    from django.shortcuts import render
from .forms import PostAdminForm
from django.http import HttpResponse

def article(request):
    if request.method == 'POST':
        form = PostAdminForm(data=request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse('提交完了')
    form = PostAdminForm()
    return render(request, 'article.html', locals())

  7. article.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>haha</title>
</head>
<body>

<form method="post">
        {% csrf_token %}
        {{form.content |safe}}
        {{form.media}}
        <input type="submit" value="Submit">
    </form>

</body>
</html>

    注意加上{{form.media}}，根据文档，这句相当于下面手动加载外部富文本框资源。不加载资源无法正常显示

    {% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

  8. admin.py

    from django.contrib import admin
from .forms import *
from .models import *

@admin.register(ArticleInfo)
class ArticleInfoAdmin(admin.ModelAdmin):
    list_display = ['content']
    form = PostAdminForm  #注意！！ 6.3.2版本下，RichTextUploadingField要在此处指定form才能在后台正常显示 ，而RichTextField不需要指定
    # 如果降低了版本为6.0.0，都不需要指定form

  9. 数据迁移，创建superuser，登录admin后台，功能一切正常；访问前端界面http://127.0.0.1:8000/h.html，功能正常。
    RichTextField和RichTextUploadingField两者的切换别忘了数据对应跟着迁移。

走的弯路：

由于先实验的普通富文本框，实验成功后，再换为能上传文件的富文本框。切换过程中，忘记将模型表单字段也由widget=CKEditorWidget()更改为widget=CKEditorUploadingWidget()，导致切换后不出现upload按钮
在这里插入图片描述

刚开始没查出原因，参考1 和 参考2，更改config.js文件，添加配置
config.filebrowserImageUploadUrl= "/media/article_images"; 或者
config.filebrowserImageUploadUrl="/media/article_images/&responseType=json"; 都无效
在这里插入图片描述
为了弄清楚config.filebrowserImageUploadUrl的含义和用法，参考官方文档
**
在这里插入图片描述
如果没有设置，就用filebrowserUploadUrl，如果设置了这个参数，upload按钮就会出现

在这里插入图片描述

查看源代码，默认会设置设置这个参数啊（如果确定用的是’ckeditor_uploader’的话）

# ...\venv\Lib\site-packages\ckeditor_uploader\widgets.py
from django.urls import reverse
from ckeditor import widgets

class CKEditorUploadingWidget(widgets.CKEditorWidget):
    def _set_config(self):
        if "filebrowserUploadUrl" not in self.config:
            self.config.setdefault("filebrowserUploadUrl", reverse("ckeditor_upload"))
        if "filebrowserBrowseUrl" not in self.config:
            self.config.setdefault("filebrowserBrowseUrl", reverse("ckeditor_browse"))
        super(CKEditorUploadingWidget, self)._set_config()

更有甚者（Enable Image Upload Button in ckeditor in Python/Django）让我去更改upload按钮的‘hidden’属性。upload按钮在ckeditor面板中隐藏没错，在ckeditor_uploader应该会自动显示出来啊，为什么需要手动更改？除非我用得根本就还是ckeditor（事实证明，确实如此）

查缺补漏：几个路径配置的用法与区别

富文本框不能显示，最先想到的原因是路径问题，检查了几个‘static’路径，更改半天都无效，最后发现这里根本就没用到static路径。。为了加深记忆，做个笔记吧~

STATIC_URL = '/static/'   # 只能识别APP下的static文件夹
STATICFILES_DIRS = [BASE_DIR / 'publicStatic']   # 上面的升级版：资源集合，上线生产过程前需要去掉
STATIC_ROOT = BASE_DIR / 'static'   # 上线生产阶段使用，服务器和项目资源映射，collectstatic命令收集所有的静态资源放这里

# 设置媒体资源的保存路径
MEDIA_URL = "/media/"   # 代表用户通过URL来访问这个本地地址的URL。如本机http://127.0.0.1/， MEDIA_URL设置为"/site_media/"，那么通过http://127.0.0.1/site_media/*** 就可以访问相关的上传图片或者其他资源。
MEDIA_ROOT = BASE_DIR / "media"   # 用户上传的文件保存位置

次日更新：来看看我又发现了什么好问题

次日来重新操作一遍上传文件，发现普通用户在前端上传图片报错Incorrect server response.
在这里插入图片描述

把cookie清除了也不行，superuser登录admin后台中上传图片一切正常，但是普通用户前端就是上传不了图片！
参考django ckeditor image upload搞清楚原来默认上传文件有个职员身份限制！搞定！看来上传图片需要用户登录。

等等，我的demo不是为了节省篇幅而把自定义登录注册删了吗？不登陆为什么可以上传？实验一番，发现原来admin后台登录后，直接返回到前端富文本界面，操作此界面的用户还是刚才admin登录的用户！ 在views.py的视图函数article中，打印 登录admin后访问前端富文本界面的request.user，和admin logout 后访问前端界面的request.user，验证猜想！

至于昨天为什么没发现错误，是因为我在admin后台登录了具有最高权限的superuser（不存在职员身份限制问题），并且不知道后台登录的superuser可以影响到前端（“不登录”还可以上传文件的问题），而superuser也一直没有logout，歪打正着，一路畅通。今天换成普通用户，就发现问题了。（仔细想想，富文本框中上传的文件属于文章信息表的content字段，文章信息表又和User表有关联，如果是匿名用户，上传的内容属于谁呢？）
在这里插入图片描述

# 总urls.py
...
from django.contrib.auth.decorators import login_required
from django.views.decorators.cache import never_cache
from ckeditor_uploader import views as ckeditor_views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('show.urls')),
    re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
   
    # 设置编辑器的路由信息
    # path('ckeditor/', include('ckeditor_uploader.urls')),
    path('ckeditor/upload/', login_required(ckeditor_views.upload), name='ckeditor_upload'),
    path('ckeditor/browse/', never_cache(login_required(ckeditor_views.browse)), name='ckeditor_browse'),
]
DarringZ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
django轻松使用富文本编辑器CKEditor的方法
12-24
前言 django是一个容易快速上手的web框架，用它来创建内容驱动型的网站（比如独立博客）十分方便。遗憾的是，django并没有提供官方的富文本编辑器，而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript，使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合，python当然也不例外。本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor。 使用方法 1、安装 pip install django-ckeditor 2、将‘ckeditor’settings.py中的INSTALLED_APPS 3、由于djang-ck
Django富文本编辑器
我可能只是个小白
01-11 720
Django富文本编辑器 在django模型中，如果将商品详情字段类型设置为TextFiled(),当将该模型加入到后台管理的时候，只会呈现出普通的文本框。但是，我们实际工作中，编辑商品详情需要进行格式的编辑、上传图片、排版、修改文字颜色，这些普通的TextField都是不能实现的。 怎么解决？使用富文本编辑器 富文本编辑器有很多种类，我们项目中采用ckeditor 文档地址：https://py...
CKeditor 富文本编辑器 后台上传图片上传不到服务器的问题之解决
qq_43439853的博客
10-17 7209
最近是要做一个新闻列表和新闻详情的接口，新闻的model有一个新闻内容字段是要用富文本字段的，就用了CKeditor富文本编辑器 一、安装    django-ckeditor     5.6.1   二、添加到应用 INSTALLED_APPS = [     'django.contrib.admin',     'django.contrib.auth',     'django.co...
django【笔记】 富文本使用
m0_47812755的博客
07-19 162
第一步：下载 pip install django-ckeditor 需要上传图片功能时，还需下载额外组件。 pip install pillow 第二步：注册 django的app中记得注册两个应用。 第三步：配置 配置富文本功能： #配置 ckeditor CKEDITOR_UPLOAD_PATH = 'upload/' CKEDITOR_CONFIGS = { 'default': {}, 'comment_ckeditor': { 'toolbar': 'custo
Django配置CKEditor富文本编辑器
遨游浩宇的博客
02-19 682
在使用Django配置富文本编辑器的时候，发现很多的教程又不全面的地方，因此在这里总结一下，方便大家参考，如果发现有问题的地方，欢迎大家指出！
Web开发的富文本编辑器CKEditor介绍,Django有库ckeditor_uploader对它进行支持,django-ckeditor安装方法及使用注意事项
昊虹AI笔记
07-13 4809
Web开发的富文本编辑器CKEditor介绍,Django有库ckeditor_uploader对它进行支持
Django使用ckeditor富文本编辑器
一越王超的博客
02-07 1310
后台使用 步骤1：安装django-ckeditor：、 pip install django-ckeditor 步骤2：安装django-ckeditor： 前端展示 前端使用
【Django富文本编辑】Ckeditor的配置、使用和踩坑（应该全）
热门推荐
黎明总是如期而至
08-29 1万+
目录 一、基本应用 1.安装 2.配置ckeditor 3.models字段使用，引用步骤2中的ckeditor配置 4.forms字段使用 5.admin后台使用 二、前端应用 1.基本使用中的全部执行完后可以设置前端页面了（没有步骤5也可以） 2.urls路由 3.views配置 4.html页面配置 5.post后台处理数据 三、带图片上传的编辑器 1.安装pillow（所有屠屏功能都需要这个库） 2.添加配置ckeditor 3.urls文件配置 4.修改modes
基于python3.7 及 Django3 的CKEditor富文本编辑器在前端和后台中上传图片的配置及应用方法
3D模型素材库
05-25 1716
这篇文章基于python3.7和Django3.0.6，django-ckeditor的版本为5.9.0. 安装好上面的运行环境后，接下来就是对配置方面详细说明。 1 settings.py 的配置 以下配置均在settings.py文件中完成 （1） INSTALLED_APPS的配置 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes',
Django在admin后台集成TinyMCE富文本编辑器的例子
01-21
Django原生的TextField并不友好，集成TinyMCE富文本编辑器 Django版本：1.11.5 TinyMCE版本：4.6.7 第一步：从官网下载TinyMCE https://www.tinymce.com/download/ 注意下载的是下面那个开发包，Dev Package。此包包...
Django框架使用富文本编辑器Uedit的方法分析
01-20
本文实例讲述了Django框架使用富文本编辑器Uedit的方法。分享给大家供大家参考，具体如下： Uedit是百度一款非常好用的富文本编辑器 一、安装及基本配置 官方GitHub（有详细的安装使用教程）：...
djangocms-text-ckeditor：使用CKEditor 4的django CMS文本插件
02-04
djangocms-text-ckeditor：使用CKEditor 4的django CMS文本插件
Django简单博客实战（三）--- 接入富文本编辑ckeditor
狼性书生
05-22 604
Django接入富文本编辑ckeditor 后台配置ckeditor 安装ckeditor pip install django-ckeditor 配置ckeditor 2.1 不包含图片上传功能 2.1.1 在settings.py中的INSTALLED_APPS添加ckeditor,并配置ckeditor指定数量工具栏 INSTALLED_APPS添加ckeditor INSTALLED_APPS = [ 'simpleui', 'django.contrib.admin',
python Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系
最新发布
shixuegen的专栏
04-30 1143
在 Django 中，管理用户权限和角色通常涉及到使用 Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系。如果你的前端和后端是分开的，你可能希望使用 Django REST framework 来创建 RESTful API，以便前端可以请求和更新权限数据。验证和授权: 确保后端 API 进行了适当的验证和授权，以防止未授权的用户访问或修改权限数据。显示权限: 前端根据接收到的权限信息，使用 Element UI 组件显示用户的当前权限。然后返回更新后的权限状态给前端。
Django-admin组件
m0_72839702的博客
04-29 1752
admin是django中提供的一套可视化工具：用于对ORM中定义的表进行增删改查。
基于python的舞蹈经验分享交流网站django+vue
专注分享bishe530的博客
04-30 1035
首页、舞蹈知识、舞蹈发布、用户分享、舞蹈考级、舞蹈论坛、舞蹈咨询、个人中心、后台管理等信息管理功能，从而达到对舞蹈网站的高效管理。舞蹈网站主要是借助计算机，通过对舞蹈网站所需的信息管理，增加用户的选择，同时也方便对广大用户信息的及时查询、修改以及对用户信息的及时了解。
Django-admin单例模式和懒加载
m0_72839702的博客
04-29 1399
当我们实例化对象时，就会在内存开一个空间__new____init__name="张三"__new____init__单例模式的目的，就是让我们在创建类对象时，都使用第一次创建的类对象，而不是像上文那样每次使用时都创建一个对象python的执行顺序是1加载admin.py文件2实例化一个对象3当我们再次导入admin.py文件时，python不会重新加载，步骤4也就是一开始创建的admin对象，并不会重新创建一个新的对象。
Django模板查找顺序
m0_72839702的博客
04-29 677
，找到了后续就不找了；如果没有，就顺着app的注册顺序进行查找。如果有定义，首先去这个目录下面查找（根目录下。首先看django项目的。
django富文本在后台上传，在前端显示流程
05-26
在 Django 中使用富文本编辑器可以通过以下步骤实现上传和前端显示： 1. 安装富文本编辑器，如 CKEditor 或 TinyMCE。 2. 在 models.py 中定义一个 TextField 字段来存储富文本内容。 3. 在后台 admin.py 中配置富文本字段的显示和上传，例如： ```python from django.contrib import admin from django.db import models from ckeditor.widgets import CKEditorWidget from .models import Post class PostAdmin(admin.ModelAdmin): formfield_overrides = { models.TextField: {'widget': CKEditorWidget} } admin.site.register(Post, PostAdmin) ``` 4. 在前端页面中使用富文本编辑器来显示内容，例如： ```html {% extends 'base.html' %} {% block content %} <h1>{{ post.title }}</h1> {{ post.content|safe }} {% endblock %} ``` 其中，`post.content` 是存储富文本内容的字段，`|safe` 运算符用于将富文本内容作为 HTML 标记渲染到页面上。 通过以上步骤，我们就可以实现在 Django 后台上传富文本内容，并在前端页面上正确地显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值