Django程序中如何添加js插件文本编辑器
admin
2023-08-03 15:09:05
0
第一步:在首页中添加写博客的按钮
    
  •         写博客     
  • 第二步:写相应的创建博客视图,编辑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: 'h2', 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  os
    import  models
    from s10day12bbs import settings
    class 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):
            pass
    def 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: 'h2', 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 %}

    效果图:

    Django程序中如何添加js插件文本编辑器

    相关内容

    热门资讯

    霸占车位的体育局干部彭某曦,她... 就在刚刚,后台很多读者给我留言,说我昨天的文章写得很好呀,怎么不见了?对此我想说的是,我也不知道为什...
    全程锁定 看人工智能如何赋能台... 台风“巴威”持续逼近我国东南沿海。在台风生成之初,上海市气象局的人工智能气象模型就已全程锁定、动态追...
    脉流科技获WIPO全球奖 本报讯 (记者 张苗 李洁薇 实习生 金玉鑫) 当地时间7月10日,在瑞士日内瓦举行的2026年联合...
    山东济宁:让机器人“跑”进千行... 盛夏时节,孔孟之乡迎来一场科技与产业深度交融的大会。7月11日至13日,由山东省机器人行业协会、中国...
    外交部亚洲司负责人就日方涉“南... 2026年7月12日,外交部亚洲司负责人就日本外相炒作“南海仲裁案裁决”出台十年发表谈话、日伙同他国...
    全球首款可变形个人机器人,上纬... IT之家 7 月 12 日消息,上纬新材今日发布启元 T1 实机视频,号称“全球首款可变形个人机器人...
    腾讯重仓一个IPO 图片来源:视觉中国 作者/杨继云 报道/投资界PEdaily 深圳超级IPO来了。 日前,深圳云豹智...
    乌方称“俄军9成导弹和无人机有... 近日,乌克兰总统顾问弗拉修克在接受日本共同社的采访时声称,俄军在进攻乌克兰时使用的巡航和弹道导弹及无...
    美国驻阿曼使馆发布“就地避险”... 当地时间7月12日,美国驻阿曼大使馆向阿曼境内部分地区发布“就地避险”提醒。美国驻阿曼使馆表示,鉴于...
    风雨里的守望——广西防汛抗洪一... ↑ 7月11日,在通往广西南宁横州市镇龙乡的道路上,救援人员徒步向受困地区进发(无人机照片)。近期,...