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富文本编辑器问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。