Shulou(Shulou.com)06/02 Report--

How to use wangEditor rich text editor in Vue.js, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

1. Front end code front end HTML

Welcome to the wangEditor Rich text Editor

Add frontend js 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 ('content added successfully') } else {this.$message.error ('failed to add content');}}, 'json');}}) 2. Backend code (python + Django) django routing from django.conf.urls import patternsfrom home_application import host_viewurlpatterns = patterns ('home_application.views', (r' ^ $', 'home'), (r' ^ api/test/$', "test"), (r'^ upload_img/$', host_view.upload_img), (r'^ media/ (? P\ d +). (? P\ w +)', host_view.get_media) ...) django view import osimport timefrom django.views.decorators.csrf import csrf_exemptfrom django.http import JsonResponse, HttpResponsefrom django.utils.encoding import escape_uri_pathdef check_upload_wrapper (func): def inner (* args, * * kwargs): if not os.path.exists ("media/"): os.makedirs ("media/") return func (* args * * kwargs) return innerdef 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_wrapperdef 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}) this is the answer to the question on how to use the wangEditor rich text editor in Vue.js. I hope the above content can help you to a certain extent, if you still have a lot of doubts to be solved, you can follow the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.