第一步:在首页中添加写博客的按钮    
        
      
       写博客    
      
第二步:写相应的创建博客视图,编辑views.py文件def create_article(request):    if request.method == "GET" :        return  render(request,'create_aritcle.html')    elif request.method == "POST" :        print request.FILES       ##查看上传图片的路径        bbs_generater = utils.ArticleGen(request)        res = bbs_generater.create()        html_ele ="""        Your article <
     
       %s> has been created successfully !!!,        """ %(res.id, res.title)        return HttpResponse(html_ele)第三步:写对于的编辑器html文件    首先写一个空html文件,测试主页是否能成功调用这个html,    {% extends 'index.html' %}    {% block content-left  %}    
      
           编辑器页面        {% endblock %}    {% block content-right %}        right bar    {% endblock %}第四步:真正开始创建一个编辑器    首先:到https://www.tinymce.com/download/下载一个编辑器到文件    把这个js文件应用到页面中:    第一步:下载tinymce编辑器,在本程序中已经下载好,在/static/plugins/tinymce目录中第五步:在html文件中应用这个js问题,如下:    
       
         第六步:
        
          
         
          tinymce.init({    selector: "#create_bbs" });第七步:在你需要的添加编辑起的地方应用下面代码
          
           {% csrf_token %}    
           
            第八步,这个免费的编辑器的功能有点少,可以点击Advanced选择其他免费的插件也就说把上面第六部的内容换为下面的内容
            
              
             
              tinymce.init({    selector: "#create_bbs",    theme: "modern",    width: 800,    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: 'h1', styles: {color: '#ff0000'}},        {title: 'Example 1', inline: 'span', classes: 'example1'},        {title: 'Example 2', inline: 'span', classes: 'example2'},        {title: 'Table styles'},        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}    ] });
             
            
           
          
         
        
       
      
     

第九部。这个编辑器上存到数据库的内容是html内容。    把form表单头改为下面内容,即可把文件提交到名称为create_article的url中    
     
       {% csrf_token %}    具体的post请求到 create_article url的出来,上面第二步中有    views.py视图调用上传文件的模块utils.py内容如下: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'])  #获取图片路径并保存到数据库        bbs_obj.head_img = filename        bbs_obj.save()        return bbs_obj    def update(self):        passdef handle_upload_file(request, file_obj):    upload_dir = '%s/%s' % (settings.BASE_DIR, settings.FileUploadDir)    if not os.path.isdir(upload_dir):        os.mkdir(upload_dir)    print  '---->', dir(file_obj)    with open('%s/%s' % (upload_dir, file_obj.name), 'wb') as destination:        for chunk in file_obj.chunks():            destination.write(chunk)    return file_obj.name
     

完整的创建文本编辑器前端页面：

{% extends 'index.html' %}{% block container %}
     
       {% csrf_token %}  
      
           
       
        标题    
        
               
         
                  
          
               
           
            简介    
            
                     
             
                      
              
                   
               
                图片    
                
                         
                 
                          
                  
                       
                   
                    内容    
                    
                             
                     
                              
                      
                           
                       
                              
                        
                         发表      
                         {% 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: 'h1', styles: {color: '#ff0000'}},        {title: 'Example 1', inline: 'span', classes: 'example1'},        {title: 'Example 2', inline: 'span', classes: 'example2'},        {title: 'Table styles'},        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}    ] });{% endblock %}
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     

效果图：