2 富文本的使用

huningfei

已于 2023-10-06 14:10:18 修改

阅读量23

点赞数

分类专栏： python 文章标签： python

于 2018-09-23 15:10:00 首次发布

本文链接：https://blog.csdn.net/huningfei/article/details/133052010

版权

python 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

参考 http://kindeditor.net/docs/usage.html

1 下载软件

2 设置setting.py

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


# 告诉djanjo项目用户上传的文件保存在哪个目录下
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")
# 告诉用户用哪个前缀来访问刚才的定义的那个目录
MEDIA_URL = "/media/"

3 设置url

    # 给用户上传的那些文件路径做认证上传头像的
    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,这个目录就是存放上传的图片的

6 index页面设置

<!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 最后就可以上传图片了

huningfei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2 富文本的使用

参考http://kindeditor.net/docs/usage.html1 下载软件2 设置setting.pySTATICFILES_DIRS=[ os.path.join(BASE_DIR,"static"),]# 告诉djanjo项目用户上传的文件保存在哪个目录下MEDIA_ROOT = os.path.join(BASE_DIR, "upload")...
复制链接

扫一扫