Django程序中如何添加js插件文本编辑器-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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 %}
  
    标题

简介

图片

内容

新闻中心

其他资讯