【Django组件】KindEditor富文本编辑器上传文件，html样式文本，VUE异步提交数据(易懂版)

1：下载与配置
适合版本： python3
将文件包放入static文件夹内并且配置：
settings.py配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,static),os.path.join(BASE_DIR,1)">"media"# Django用户上传的都叫media文件
MEDIA_URL = /media/"
 media配置，用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR,)


REST_FRAMEWORK = {
    DEFAULT_AUTHENTICATION_CLASSES: [],1)">DEFAULT_PERMISSION_CLASSES2：前端代码：

html部分：

<div id=app">

    <div>
        <p>内容(TinyMCE编辑器，支持拖放/粘贴上传图片) </p>
        <textarea name=article_content" id=" 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/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"            uploadJson: "/KindEditor/up/",// 请求路由


            filePostName: "upload_img"            // 后端获取的参数名字  

        });
    });

</script>
// 配置属性
<script type=text/javascript/static/js/vue.min.js"></script> 
<script src=https://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/2：upImage.py:

 上传图片
from django.http import HttpResponse
from car  settings
 os,json
from django.shortcuts  render,HttpResponse,redirect


def upload(request):
     上传服务器图片
    image_fils = request.FILES.get("upload_img)
    path = os.path.join(settings.MEDIA_ROOT,1)">userimg",image_fils.name)   路径

     创建文件夹目录
    file_path = os.path.join(settings.MEDIA_ROOT,1)">)
    if not os.path.exists(file_path):
        os.makedirs(file_path)

     写到服务器
    with open(path,1)">wb) as f:
        for line in image_fils.chunks():
            f.write(line)
            f.close()

     返回图片给前端
    res = {
        error: 0,1)">url": /static/userimg/" + image_fils.name
    }

    return HttpResponse(json.dumps(res))

 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
【Django组件】KindEditor富文本编辑器上传文件，html样式文本，VUE异步提交数据(易懂版)

相关推荐
