Simple use of the kindedit editor and BeautifulSoup,
1. kindedit Editor
Is an editor for editing input text like above.
This is also a plug-in. So how to use it?
1. Download: Baidu kindedit
2. Introduction:
<script src="/static/kindeditor/kindeditor-all.js"></script>
3. Read the official documents.
In addarticle.html
<Script >{# use of the KindEditor editor #} KindEditor. ready (function (K) {window. editor = K. create ('# id_content', {{# width: "1030px" #} width: "90%", height: "500px", resizeType: 0, // The editor does not stretch uploadJson: "/uploadFile/", // upload image path {# items: ['preview', 'print ', 'template', 'code', 'Cut', 'copy ', 'paste ', 'plainpaste', 'wordpaste ',' | ', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'inserordertunedlist ', 'indent ', 'outdent', 'subscript',] #} // items: you can filter the extraFileUploadParams you want: {# forbidden csrfmiddlewaretoken: $ ("[name = 'csrfmiddlewaretoken ']"). val () ,}) ;}); </script>
When you insert the editor, you can set the size, font size, and so on .. However, when you upload an image, you will think the following:
In this case, uploadJson: "/uploadFile/" is required.
Url. py
url(r'^uploadFile/$', views.uploadFile),
Views. py
Def uploadFile (request): '''upload image path''' print (request. path) # The returned path is print (request. FILES) # <MultiValueDict: {'imgfile': [<InMemoryUploadedFile: 44643.gif (image/gif)>]}> file_obj = request. FILES. get ("imgFile") # get the file object uploaded by the user filename = file_obj.name # path to the file name = OS. path. join (settings. MEDIA_ROOT, "upload_article_img", filename) # concatenate a path bar file and save it. Generally, the path of the uploaded file is stored in print ("====", path) in media) with open (path, "wb") as f: # keep the file in the local for line in file_obj: # Or for I in chunks () is not a row of read, the specific size is 64*2 ** 10 f. write (line)
Response = {"error": 0, "url": "/media/upload_article_img/" + filename + "/" # frontend image file preview} return HttpResponse (json. dumps (response) # note that the returned result is a json string.
Ii. XSS attack protection:
BeautifulSoup: a python library that queries the data you want, but only for tag strings. It is mainly used to crawl data from webpages.
1. First, you need to know some basic knowledge.
<Html>Four objects:
1. comment object: annotation object
2. Tag object: equivalent to a Tag object in html
3. BeautifulSoup object: equivalent to the entire document object (Dom object)
4. Navigablefetry Text object
The following is a specific application: xss attack protection. Some of them are unsafely deleted or replaced.
Def filter_xss (html_str): valid_tag_list = ["p", "div", "a", "img", "html", "body", "br ", "strong", "B"] # valid tag list valid_dict = {"img": ["src", "alt"], "p": ["id ", "class"], "div": ["id", "class"]} # valid attribute list from bs4 import BeautifulSoup = BeautifulSoup (html_str, "html. parser ") # soup -----> document ######## change to dict for ele in soup. find_all (): # filter illegal tags if ele. name not in valid_dict: ele. decompose () # filter illegal attributes else: attrs = ele. attrs # p {"id": 12, "class": "d1", "egon": "dog"} l = [] for k in attrs: if k not in valid_dict [ele. name]: l. append (k) for I in l: del attrs [I] print (soup) return soup. decode ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
