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插件文本编辑器

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...