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

This article will explain in detail how to add a js plug-in text editor to the Django program. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Step 1: add a button to write blog on the home page. Step 2: write the corresponding blog view, edit the views.py file def create_article (request): if request.method = = "GET": return render (request) 'create_aritcle.html') elif request.method = = "POST": print request.FILES # # View the path where the picture is uploaded bbs_generater = utils.ArticleGen (request) res = bbs_generater.create () html_ele = "" Your article has been created successfully!!, ""% (res.id) Res.title) return HttpResponse (html_ele) step 3: write to the editor html file first write an empty html file to test whether the home page can successfully call the html {% extends' index.html'%} {% block content-left%} Editor page {% endblock%} {% block content-right%} right bar {% endblock%} step 4: really start creating an editor first: go to https://www.tinymce.com/download/ to download an editor to a file and apply the js file to the page Face to face: step 1: download the tinymce editor Already downloaded in this program, step 5 in the / static/plugins/tinymce directory: apply the js problem in the html file, as follows: step 6: tinymce.init ({selector: "# create_bbs"}) Step 7: where you need to add and edit, apply the following code {% csrf_token%} step 8, this free editor has a little function, you can click Advanced to select other free plug-ins, that is to say, replace the content of part 6 above with the following content tinymce.init ({selector: "# create_bbs", theme: "modern", width: 800,300 height: 300). Plugins: ["advlist autolink link p_w_picpath lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "save table contextmenu directionality emoticons template paste textcolor"], content_css: "css/content.css", toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link p_w_picpath | print preview media fullpage | forecolor backcolor emoticons" Style_formats: [{title: 'Bold text', inline:' b'}, {title: 'Red text', inline:' span', styles: {color:'# ff0000'}}, {title: 'Red header', block:' H2, styles: {color:'# ff0000'}}, {title: 'Example 1, inline:' span', classes: 'example1'} {title: 'Example 2, inline:' span', classes: 'example2'}, {title:' Table styles'}, {title: 'Table row1', selector:' tr', classes: 'tablerow1'}]}) Part nine. The content saved to the database in this editor is html content. By changing the header of the form form to the following, you can submit the file to the url named create_article {% csrf_token%} specific post request to create_article url. In the second step above, the views.py view calls the module utils.py that uploads the file as follows: import osimport modelsfrom s10day12bbs import settingsclass ArticleGen (object): def _ _ init__ (self) Request): self.requset = request def parse_data (self): form_data = {'title': self.requset.POST.get (' title'), 'content': self.requset.POST.get (' content'), 'summary': self.requset.POST.get (' summary'), 'author_id': self.requset.user.userprofile.id,' head_img':' 'category_id': 1} return form_data def create (self): self.data = self.parse_data () bbs_obj = models.Article (* * self.data) bbs_obj.save () filename = handle_upload_file (self.requset Self.requset.FILES ['head_img']) # get the path of the picture and save it to the database bbs_obj.head_img = filename bbs_obj.save () return bbs_obj def update (self): passdef handle_upload_file (request, file_obj): upload_dir ='% s hand% s'% (settings.BASE_DIR) Settings.FileUploadDir) if not os.path.isdir (upload_dir): os.mkdir (upload_dir) print'- >', dir (file_obj) with open ('% s file_obj)% s'% (upload_dir, file_obj.name), 'wb') as destination: for chunk in file_obj.chunks (): destination.write (chunk) return file_obj.name

Complete the creation of the front page of the text editor:

{% extends' index.html'%} {% block container%} {% csrf_token%} title introduction Picture content publish {% endblock%} {% block bottom-js%} tinymce.init ({selector: "# create_bbs", theme: "modern" / / width: 900, height: 300, plugins: ["advlist autolink link p_w_picpath lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "save table contextmenu directionality emoticons template paste textcolor"], content_css: "css/content.css" Toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink p_w_picpath | print preview media fullpage | forecolor backcolor emoticons", style_formats: [{title: 'Bold text', inline:' b'}, {title: 'Red text', inline:' span', styles: {color:'# ff0000'}}, {title: 'Red header', block:' H2' Styles: {color:'# ff0000'}, {title: 'Example 1, inline:' span', classes: 'example1'}, {title:' Example 2, inline: 'span', classes:' example2'}, {title: 'Table styles'}, {title:' Table row1', selector: 'tr', classes:' tablerow1'}]}) {% endblock%}

Effect picture:

On "how to add js plug-in text editor in the Django program" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.