1.前端代码

前端HTML

<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>

<link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.css" rel="stylesheet">

<div id="app" style="margin-top: 60px;">

    <el-row>

        <el-col :span="16" :offset="4">

            <div id="editor">

                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>

            </div>

        </el-col>

        <el-col :span="4" :offset="16" style="margin-top: 20px;">

            <el-button type="primary" @click="handleAdd" id="btn1">添加</el-button>

        </el-col>

    </el-row>

</div>

前端js

<script type="text/javascript">

    new Vue({

        el: '#app',

        data: {

            editor: null

        },

        mounted() {

            this.init()

        },

        methods: {

            init() {

                const E = window.wangEditor;

                this.editor = new E(document.getElementById('editor'));

                this.editor.customConfig.uploadImgServer = '/upload_img/';

                this.editor.customConfig.showLinkImg = false;

                this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

                this.editor.customConfig.uploadImgMaxLength = 5;

                this.editor.customConfig.withCredentials = true;

                this.editor.create();

            },

            handleAdd() {

                console.log(this.editor.txt.html());

                console.log(this.editor.txt.text());

                axios.post(site_url + "create_blog/", {"content": this.editor.txt.html()}).then(res => {

                    if (res.data.result) {

                        this.$message.success('添加内容成功');

                    } else {

                        this.$message.error('添加内容失败');

                    }

                }, 'json');

            }

        }

    })

</script>

2.后端代码(python + Django)

django路由

from django.conf.urls import patterns

from home_application import host_view

urlpatterns = patterns(

    'home_application.views',

    (r'^$', 'home'),

    (r'^api/test/$', "test"),

    (r'^upload_img/$', host_view.upload_img),

    (r'^media/(?P<name>\d+).(?P<postfix>\w+)', host_view.get_media),

    ...

)

django视图

import os

import time

from django.views.decorators.csrf import csrf_exempt

from django.http import JsonResponse, HttpResponse

from django.utils.encoding import escape_uri_path

def check_upload_wrapper(func):

    def inner(*args, **kwargs):

        if not os.path.exists("media/"):

            os.makedirs("media/")

        return func(*args, **kwargs)

    return inner

def create_blog(request):

    data = json.loads(request.body)

    content = data.get("content")

    print(content)

    return JsonResponse({"result": True})

def get_media(request, name, postfix):

    file_name = name + "." + postfix

    file_path = os.path.join("media", file_name)

    file = open(file_path, 'rb')

    response = HttpResponse(file)

    response['Content-Type'] = 'application/octet-stream'

    response['Content-Disposition'] = "attachment;filename*=utf-8''{}".format(escape_uri_path(file_name))

    return response

@csrf_exempt

@check_upload_wrapper

def upload_img(request):

    file_list = []

    for k, v in request.FILES.items():

        t = time.strftime('%Y%m%d%H%M%S')

        now_file_name = t + '.' + k.split('.')[-1]

        file_path = os.path.join('media', now_file_name)

        with open(file_path, "ab") as f:

            f.write(v.read())

        file_list.append("/" + file_path)

    return JsonResponse({"errno": 0, "data": file_list})