关键词：
HTML
<div class="col-md-9"> <div> <p class="text-center" style="background-color: #e5eef7;font-size: 18px" >添加文章</p> <form action="" method="post" style="margin-top: 40px"> % csrf_token % <label for="title">文章标题</label> <input type="text" id="title" class="form-control" name="title"> <div style="margin-top: 10px"> <label for="">内容</label> <div> <textarea id="editor_id" name="content" style="width:900px;height:400px;" ></textarea> </div> </div> <input type="submit" class="btn btn-info " value="提交文章" style="margin-top: 10px"> </form> </div> </div>
Jquery
//文本编辑器（kindeditor）的导入 <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function(K) window.editor = K.create(‘#editor_id‘, items:[ ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘code‘, ‘cut‘, ‘copy‘, ‘paste‘, ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘, ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘, ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘, ‘multiimage‘, ‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘, ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘], //编辑器功能 resizeType:0, //文本框固定 uploadJson:‘/upload/‘, //上传路径 extraFileUploadParams : csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val() //csrf_token , filePostName:‘upload_img‘ // 指定上传文件健名 ); );
views
from bs4 import BeautifulSoup @login_required def add_article(request): data = get_data(request.user.username) if request.method==‘POST‘: title=request.POST.get(‘title‘) content = request.POST.get("content")
soup = BeautifulSoup(content,‘html.parser‘) #非法标签过滤防止XSS攻击 for tag in soup.find_all(): if tag.name == ‘script‘: tag.decompose() #获取文本进行截断，赋值给desc desc = soup.text[0:150] Article.objects.create(title=title,content=str(soup),user_id=request.user.pk,desc=desc) return render(request,‘add_article.html‘,locals()) import os from Blog import settings #文本编辑器文件传输 def upload(request): file = request.FILES.get(‘upload_img‘) path = os.path.join(settings.MEDIA_ROOT,‘add_upload_img‘,file.name) with open(path,‘wb‘) as f: for line in file: f.write(line) response= ‘error‘:0, ‘url‘:‘/media/add_upload_img/%s‘%file.name import json return HttpResponse(json.dumps(response)) #前端文本编辑器中图片预览
重点
1、在jquery中文本编辑器（kindeditor）的引入，与初始化
2、后端文件存储位置，拼接。
3、前端文本编辑器上传后，的预览功能。（后端传送的地址非文件地址，而是前端可以直接访问文件的URL）
4、利用bs4对纯属内容进行过滤（前端纯属到后端的内容是带标签样式名的），通过bs4过滤切割，过滤掉数据中的标签名
django项目试炼blog（10）--补充滑动验证码(代码片段)
首先安装一个需要用到的模块pipinstallsocial-auth-app-django安装完后在终端输入piplist会看到social-auth-app-django3.1.0social-auth-core3.0.0然后可以来我的github，下载关于滑动验证码的这个demo：https://github.com/Edward66/slide_auth_code下载完后启动项... 查看详情
django项目试炼blog--文章详情页2--前端样式的继承与楼评论显示(代码片段)
viewsfromdjango.dbimporttransactiondefcomment(request):article_id=request.POST.get(‘article_id‘)content=request.POST.get(‘content‘)pid=request.POST.get(‘parent_id‘)#事务操作生成评论，文章数据中评论总数自动+1（同时执行）withtra 查看详情
django项目试炼blog(代码片段)
1、确定表结构 fromdjango.contrib.auth.modelsimportAbstractUserclassUserInfo(AbstractUser):"""用户信息表,继承session生成的auth_user表需要在setting中加入AUTH_USER_MODEL=‘app01.UserInfo‘"""nid=models.AutoField(primary_key=True)telephone=models.CharField(max_length=... 查看详情
django项目试炼blog--文章详情页1--点赞功能(代码片段)
url#文章详情页re_path(r‘(?P<username>\w+)/article/(?P<article_id>\d+)/$‘,views.article),#点赞path(‘up_down/‘,views.up_down), viewsfromdjango.db.modelsimportFdefup_down(request):sign=re 查看详情
django博客开发教程,django快速开发个人blog
...页面创建数据库模型用Admin管理后台管理数据使用富文本编辑器添加数据URL与视图函数体验django模板体 查看详情
django项目中使用kindeditor富文本编辑器(代码片段)
....create(‘#content‘,#加上这句话可以使jquery能获取到富文本编辑器的内容#afterBlur:function()this.sync();,width:"800",height:"600",resizeType:0,uploadJson:"/back/article/upload/",extraFileUploadParams:csrfmiddlewaretoken:"csrf_token",filePostName:"upload_img"//上传图片的名... 查看详情
用带有添加/编辑图标的文本框替换外键下拉列表 - Django
】用带有添加/编辑图标的文本框替换外键下拉列表-Django【英文标题】：Replaceforeignkeydropdownwithtextboxwithadd/editicon-Django【发布时间】：2018-03-1106:51:47【问题描述】：DjangoAdmin中相关外键字段，默认显示element是一个包含所有外键的... 查看详情
django之路
...间件Django——用户认证组件Django——cbv与fbvDjango——文本编辑器Django——发送邮件Django进阶RESTfulDjangoRESTframeworkDjango与Celery配合实现定时任务Django与supervisor管理进程项目相关Django——图书管理系统BBS+Blog项目开发Django——CRM项目D... 查看详情
django——文本编辑器(代码片段)
...持用户的在线编辑博客，我们选用了kindeditor这个强大的编辑器。以下是对kindeditor的简介，以及在Django中引入这个编辑器的方法:)1.KindEditor是什么？KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所... 查看详情
我的开源项目——搭建个人blog(代码片段)
一直想创建个独立的blog，业余时间基于Python-Django、JQuery、Bootstrap实现了一个简单的blog平台，包括文章发布管理后台和博客前端两部分，欢迎一起交流学习。github源码地址：https://github.com/827992983/blog管理端相关功能：支持富文本... 查看详情
在 django 博客站点中集成文本编辑器
】在django博客站点中集成文本编辑器【英文标题】：Integratethetexteditorindjangoblogsite【发布时间】：2021-11-1605:43:03【问题描述】：你知道富文本编辑器吗？请访问medium.com，我希望你会被这个最漂亮的文本编辑器所启发，我想在我的... 查看详情
项目3(代码片段)
课程详情页CKEditor富文本编辑器富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本，我们引入富... 查看详情
Django-summernote 工作正常，但显示带有 HTML 标记的文本
...ernote来编辑模型形式的文本字段。我可以毫无问题地使用编辑器。在渲染使用此工具编辑的文本的输出时，它会显示为html标记。环顾了一段时间 查看详情
python测试开发django-55.xadmin使用markdown文档编辑器(django-mdeditor)(代码片段)
前言markdown是一个非常好的编辑器，用过的都说好，如果搭建一个博客平台的话，需要在后台做文章编辑，可以整合一个markdown的文本编辑器。github上关于django的markdown插件很多的，看了半天也不知道选哪个好，本篇用django-mdeditor... 查看详情
django富文本编辑器(代码片段)
创建工程，数据中数据格式设置为models.TextField()此时编辑器是普通的文本框。使用tinymce1、安装django-tinymcepipinstalldjango-tinymce12、INSTALLED_APPS中添加‘tinymce’,3、模型文件中导入包fromtinymce.modelsimportHTMLField14、设置模型成员类型：sc... 查看详情
web项目中nicedit富文本编辑器的使用
web项目中nicedit富文本编辑器的使用一、为什么要用富文本编辑器？先说什么是富文本编辑器吧，普通的html中input或textarea标签只能进行简单的输入，而做不到其他的文本调整功能，甚至连空格与回车都要另写工具类去识别，更谈... 查看详情
从 Django 项目启动多个 Django 开发服务器
...【问题描述】：我正在为Django项目编写一个基于Web的代码编辑器。我想从编辑器中启动Djangorunserver命令，而不会干扰编辑器本身的服务器。下面是我使用的代码。服务器（端口9999）已启动，但是当 查看详情
成功删除、添加或编辑项目的 django 消息
】成功删除、添加或编辑项目的django消息【英文标题】：djangomessagesforasuccessfullydelete,addoredititem【发布时间】：2018-05-1803:09:05【问题描述】：我已经开始使用django消息来创建项目。它非常适合创建添加新项目。但是..我希望每个... 查看详情