【Django組件】KindEditor富文本編輯器上傳文件，html樣式文本，VUE非同步提交數據(易懂版)

1：下載與配置

適合版本： python3

下載：//kindeditor.net/down.php

文檔：//kindeditor.net/doc.php

將文件包放入static文件夾內並且配置：

settings.py配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, "media"),
]

# Django用戶上傳的都叫media文件
MEDIA_URL = "/media/"
# media配置，用戶上傳的文件都默認放在這個文件夾下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")


REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": [],
    "DEFAULT_PERMISSION_CLASSES": [],
}

 

2：前端程式碼：

html部分：

<div id="app">

    <div>
        <p>內容(TinyMCE編輯器，支援拖放/粘貼上傳圖片) </p>
        <textarea name="article_content" id="article_content" cols="60" rows="20"
                  style="width: 100%" v-model="article_contents">
        </textarea>
    </div>
    <input type="submit" class="btn btn-info" @click="submits">

</div>


JS部分：
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="/static/js/popper.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
// 配置屬性
<script>
    KindEditor.ready(function (K) {
        window.editor = K.create('#article_content', {
            width: "100%",                      
            height: "500px",


            allowFileManager: true,
            afterCreate: function () {
                this.sync();
            },
            afterBlur: function () {
                this.sync();
            },

            uploadJson: "/KindEditor/up/",         // 請求路由


            filePostName: "upload_img"            // 後端獲取的參數名字  

        });
    });

</script>
// 配置屬性
<script type="text/javascript" src="/static/js/vue.min.js"></script> 
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            article_contents: "",
        },
        methods: {
            submits() {
                console.log("KindEditor", KindEditor.instances[0].html())      // 獲取到圖片的/樣式以及內容
            },

        }
    })
</script>

3：上傳文件，圖片之類的，配置後端路由

1：上傳文件路由配置：
    # 上傳圖片，文件
    url('KindEditor/up/', upImage.upload),




2：upImage.py:

# 上傳圖片
from django.http import HttpResponse
from car import settings
import os, json
from django.shortcuts import render, HttpResponse, redirect


def upload(request):
    # 上傳伺服器圖片
    image_fils = request.FILES.get("upload_img")
    path = os.path.join(settings.MEDIA_ROOT, "userimg", image_fils.name)  # 路徑

    # 創建文件夾目錄
    file_path = os.path.join(settings.MEDIA_ROOT, "userimg")
    if not os.path.exists(file_path):
        os.makedirs(file_path)

    # 寫到伺服器
    with open(path, "wb") as f:
        for line in image_fils.chunks():
            f.write(line)
            f.close()

    # 返回圖片給前端
    res = {
        "error": 0,
        "url": "/static/userimg/" + image_fils.name
    }

    return HttpResponse(json.dumps(res))

 

Tags:

VirMach 便宜 VPS

QNews

QNews