2 富文本的使用

時間 2019-11-29

標籤文本使用简体版

原文原文鏈接

參考 http://kindeditor.net/docs/usage.htmlhtml

1 下載軟件jquery

2 設置setting.pydjango

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"static"),
]


# 告訴djanjo項目用戶上傳的文件保存在哪一個目錄下
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")
# 告訴用戶用哪一個前綴來訪問剛纔的定義的那個目錄
MEDIA_URL = "/media/"

3 設置urljson

    # 給用戶上傳的那些文件路徑作認證上傳頭像的
    url(r'^media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
    # 富文本編輯器裏面上傳的圖片的存放目錄
    url(r'^fault-report/upload-img/$', views.upload_img),
    # 顯示富文本的頁面
    url(r'^index/$', views.index),

4 views設置：編輯器

from django.http import JsonResponse  # json格式
# Create your views here.
# 富文本編輯器上傳圖片的視圖
def upload_img(request):
    print(request.FILES)
    res = {"error": 0} # 這是固定寫法，必須用error
    file_obj = request.FILES.get("imgFile")
    file_path = os.path.join("upload", "report_images", file_obj.name)

    # 將文件保存在本地
    with open(file_path, "wb") as f:
        for chunk in file_obj.chunks():
            f.write(chunk)
    # 將上傳文件的url返回給富文本編輯器
    res["url"] = "/media/report_images/{}".format(file_obj.name)
    return JsonResponse(res)


def index(request):
    return render(request, "index.html", locals())

5 在項目裏新建目錄upload,而後再在下面簡歷report_images,這個目錄就是存放上傳的圖片的post

6 index頁面設置url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="content">內容</label>
        <textarea class="form-control" name="content" id="content" rows="20"></textarea>
    </div>
</form>


<script src="/static/jquery-3.3.1.min.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>

<script>
    KindEditor.ready(function (K) {
        window.editor = K.create('#content', {
            uploadJson: "/fault-report/upload-img/",
            extraFileUploadParams: {  // 上傳文件時額外傳遞的參數
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
            }
        });
    });
</script>

</body>
</html>

7 最後就能夠上傳圖片了spa

相關標籤/搜索