Django3.2+Python3.9项目中应用百度DjangoUeditor图片上传功能的应注意的一个配置

Django3.2+Python3.9项目中应用百度DjangoUeditor具体步骤不用细说了，本文只说应用中所遇到的问题及处理方案。

【问题描述】

本项目中某个Model的content字段已设置为UEditorField字段，如下所示：

content = UEditorField(verbose_name='题目主干',width=800, height=240,
                toolbars="full", imagePath="upimg/%(datetime)s.%(extname)s", filePath="upfile/",
                upload_settings={"imageMaxSize": 12040000},
                settings={}, command=None, blank=True)

在前端内容编辑html模板中，本人不想用Model对应的Form传入模板生成富文本编辑框，于是就采用了以下方式：

第一，在模板HTML顶部引入配置文件：

<link rel="stylesheet" type="text/css" href="{% static 'ueditor/themes/default/css/ueditor.css' %}">
<script type="text/javascript" src="{% static 'ueditor/ueditor.config.js' %}"></script>
<script type="text/javascript" charset="gbk" src="{% static 'ueditor/ueditor.all.min.js' %}"></script>
<script type="text/javascript" src="{% static 'ueditor/lang/zh-cn/zh-cn.js' %}"></script>

第二步，在模板HTML中间内容区适当的位置放置显示富文本编辑框的script代码：

<div id="id_content_div" class="col-12">
   <label>内容细节：</label>
   <script id="eq_body" name="eq_body" type="text/plain"></script>
</div>

第三步，在模板HTML页脚用js载入生成富文本编辑框，代码如下：

<script type="text/javascript">
 var content = UE.getEditor( 'content', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        initialFrameWidth: $("#id_content_div").width-20,//动态地让富文本框适应父DIV的宽度
        initialFrameHeight:240,        

    });
    content.ready(function(){

     });
</script>

以上配置完成后，运行网站项目，打开编辑页面，完美呈现了富文本编辑框。

可是问题来了：当光标进入富文本编辑框后，单张图上传按钮变成灰色，多图上传按钮打开后，提示“后端配置项没有正常加载，上传插件不能正常使用”。如下图 所示。

这可不符合项目需要了，得想办法解决图片上传问题。

【问题解决】

第一个方案：网上求助，结果：失败。

    根据提示，应为相关配置问题，网上搜了很多介绍，照着折腾了老半天，最终没有办法解决，宣告失败。

第二个方案：借助Django FORM 表单方式处理。

     先针对Model Article建一个Ueditor Form表单，代码如下：

    

from DjangoUeditor.forms import UEditorField, UEditorModelForm
from .models import ExaminationQuestions
from django.forms import ModelForm, forms
from django.forms.widgets import Textarea, FileInput, Input,DateInput, Select


class ContentForm(UEditorModelForm):
    class Meta:
        model = Articles
        fields = ('content',)

        labels = {
            "detail": "内容细节",

        }
        widgets = {
            "detail": Textarea(attrs={"rows": "3"}),
        }

在 addContent 函数中初始化 ContentForm 并在context中传入模板：       

ContentForm = ContentForm()

context = {    
    'ContentForm':ContentForm,
}

在HTML模板中以变量载入：

<div id="id_eq_body_div_1" class="col-12">
 {{ ContentForm }}
</div>

运行页面，发现这样载入的富文本框能正常上传图片。但这样的方式老觉得麻烦，而且项目中好几个应用都要用到富文本框，老这样总觉得不便捷，个人喜欢就在前端载入。

查看HTML源码发现，{{ ContentForm }}生成的富文本框有一个 serverUrl 属性，于是想着把这个属性给放到最开始的方式中scrip代码中试试，变成如下这样：

<script type="text/javascript">


 var content = UE.getEditor( 'content', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        initialFrameWidth: $("#id_eq_body_div").width-20,
        initialFrameHeight:240,
        serverUrl: '/ueditor/controller/?imageMaxSize=12040000&imagePathFormat=upimg%2F%25%28datetime%29s.%25%28extname%29s&filePathFormat=upfile%2F',


    });
    content.ready(function(){

     });

</script>

这样设置后，屏蔽掉上面说到的contentForm 变量，刷新页面，哈哈，图片上传功能有了。这样一来，其他几个富文本编辑页面就增加如上这样的serverUrl属性设置即可了。就不用再去建什么对应Model的form表单了。

以上算是在Django3.2+Python3.9项目中应用百度DjangoUeditor的一点经验记录，希望能帮到遇到类似问题的同学们。