Django開發(fā)中使用Ueditor上傳圖片遇到的坑及解決

更新時間：2024年09月11日 09:36:11 作者：刪庫到跑路_

在Django開發(fā)中使用Ueditor上傳圖片時,可能會遇到后端配置不正確的問題,建議在實例化Ueditor后加上serverUrl,這可以在Chrome的F12工具中查看請求的后端配置項,此外,如果需要修改上傳路徑,可以在配置文件中更改路徑,并調(diào)整view.py中的代碼來管理上傳文件

Django開發(fā)中使用Ueditor上傳圖片遇到的坑

在之前django的開發(fā)中，遇到了很多問題，接下來就說一下關于ueditor富文本編輯器的使用。

一般來說在網(wǎng)上下了富文本的DjangoUeditor包安裝了之后，引入是不會出什么問題的。

這里推薦直接git到本地把包復制進項目，當然也可以像其他人說的用pip install。

進入正題

后臺admin在使用了實例之后是這樣：

上傳圖片文件功能也可以使用。

但是寫了前端頁面之后再使用就會出現(xiàn)后端配置不正確的情況，至于報錯的圖就不貼了，研究了兩天都不想看了。

前端頁面測試代碼

{% extends 'index.html' %}
{% block title %}
    <title>發(fā)布內(nèi)容中心</title>

{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="external nofollow" >
    <script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
    <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript">
        var ue = UE.getEditor('editor',{
            serverUrl: '/ueditor/controller/',
        });
        SyntaxHighlighter.all();
    </script>
{% endblock %}

{% block basic %}

<script id="editor" type="text/plain" style="max-width:50%;height:200px;"></script>
{% endblock %}

我的是這樣，只是測試上傳功能，若要解決后端配置問題，只需要實例化ueditor之后加上一個serverurl，如下圖，因為這個前端頁面會在加載的時候去請求后端的配置項，這個直接在chromef12就看得見，這么簡單的問題困擾了我兩天的時間，網(wǎng)上各種方法都試了沒解決，說是要在config.all.js里面去改serverurl，我改了沒效果，結果前端請求的url還是php的一個文件。

解決了這個也就解決了上傳問題了。