成都网站建设设计

将想法与焦点和您一起共享

Django程序中如何添加js插件文本编辑器-创新互联

这篇文章将为大家详细讲解有关Django程序中如何添加js插件文本编辑器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在沙坡头等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计、做网站 网站设计制作按需求定制制作,公司网站建设,企业网站建设,品牌网站制作,成都全网营销推广,外贸网站建设,沙坡头网站建设费用合理。
第一步:在首页中添加写博客的按钮
    
  •         写博客     
  • 第二步:写相应的创建博客视图,编辑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插件文本编辑器

    关于“Django程序中如何添加js插件文本编辑器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    分享名称:Django程序中如何添加js插件文本编辑器-创新互联
    网址分享:http://chengdu.cdxwcx.cn/article/dphhdh.html