Vue.js中如何使用wangEditor富文本編輯器

Vue.js中如何使用wangEditor富文本編輯器，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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" >
    <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" >
            <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})

關于Vue.js中如何使用wangEditor富文本編輯器問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。