快捷導(dǎo)航

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

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

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

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

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

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

這里推薦直接git到本地把包復(fù)制進(jìn)項(xiàng)目，當(dāng)然也可以像其他人說的用pip install。

進(jìn)入正題

后臺admin在使用了實(shí)例之后是這樣：

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

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

前端頁面測試代碼

{% 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 %}

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

解決了這個(gè)也就解決了上傳問題了。