千家信息网

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

发表于:2024-11-13 作者:千家信息网编辑
千家信息网最后更新 2024年11月13日,这篇文章将为大家详细讲解有关Django程序中如何添加js插件文本编辑器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。第一步:在首页中添加写博客的按钮
千家信息网最后更新 2024年11月13日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问题,如下: 第六步:第七步:在你需要的添加编辑起的地方应用下面代码
    {% csrf_token %}
    第八步,这个免费的编辑器的功能有点少,可以点击Advanced选择其他免费的插件也就说把上面第六部的内容换为下面的内容
    第九部。这个编辑器上存到数据库的内容是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 %}{% endblock %}

    效果图:

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

    0