bbs项目引入富文本编辑器和处理xss攻击和文章预览
一、富文本编辑上传文章和图片
富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中
然后我们在html中这样使用富文本编辑器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap-theme.css">
</head>
<body>
<h2>{{ auther }}个人博客站点管理后台</h2> <h3>文章标题</h3>
<form method="post" enctype="multipart/form-data" action="">
{% csrf_token %} <label for="article_id"></label><input type="text" id="article_id" placeholder="文章标题" name="new_article_name">
<h3>文章内容</h3>
<textarea name="new_article_content" cols="70" rows="20" id="editor_id"> </textarea>
<input type="submit" value="提交" class="btn btn-success">
</form> <script src="/static/jq/jquery-3.3.1.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
{#<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>#}
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
width : '1200px',
item:[
'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',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
uploadJson:"/app1/upload/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
filePostName:"upload_img"
});
});
</script>
</body>
</html>
主要是看这里
首先要为textarea标签设置一个id,这样,我们就可以把富文本编辑器通过id镶嵌到textarea标签中
<textarea name="new_article_content" cols="70" rows="20" id="editor_id">
然后下面的script标签中就是引入富文本编辑器的js文件
<script src="/static/jq/jquery-3.3.1.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
我们上一篇博客重点讲了一下富文本编辑上传图片,这里我们就简单的看下代码就可以了
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
width : '1200px',
item:[
'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',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
uploadJson:"/app1/upload/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
filePostName:"upload_img"
});
});
</script>
window.editor = K.create('#editor_id'
这个是固定写法,把富文本放到id为editor_id的标签中,这个标签必须是textarea标签
item:[
'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',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
这个item就是设置支持哪些功能和操作,比如加粗和斜体等等一系列操作
uploadJson:"/app1/upload/",
这个参数就是上传会调用走哪个url
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
由于我们采用form的post方式上传,这里是为了解决crsf文件
filePostName:"upload_img"
这个是设置我们上传的文件的k值
def upload(request):
print(settings.MEDIA_ROOT,type(settings.MEDIA_ROOT))
file_obj = request.FILES.get("upload_img")
upload_path = os.path.join(settings.MEDIA_ROOT,"upload",file_obj.name)
with open(upload_path,"wb") as f:
for line in file_obj:
f.write(line) res={
"error":0,
"url":"/media/upload/"+file_obj.name
} return HttpResponse(json.dumps(res))
这里是我们上传文件的视图函数的处理,这里我们返回一个图片上传的路径,然后返回给前端,前端就会自动把img标签的src属性指向这个地址,这样我们打开博客就可以看到图片
二、利用bs4模块实现文章预览
另外我们一般博客一般会有一个预览的效果,这个我们该如何实现呢
这里需要引入一个模块
from bs4 import BeautifulSoup
然后利用这个模块来实现,把前端传递过来的文章内容去除标签。然后在对去除标签的字符串进行切片,然后写到数据库中即可
s = """
<li class="editor_pick"><a href="https://www.cnblogs.com/xiangnanl/p/9833965.html" id="editor_pick_lnk" target="_blank">【编辑推荐】一文弄懂“分布式锁”<span id="editor_pick_count"> (2/735)</span></a> <a href="/aggsite/headline" title="查看更多编辑推荐" class="right_more">»</a></li>
""" ret = BeautifulSoup(s,"html.parser") print(ret.text)
# 获取html标签字符串中的所有的文本内容
这里的html.parser是一个解析器,是django为我们自带的解析器,这里是固定的写法,当然我们也可以安装其他解析器
def article_site(request,auther):
method = request.method.lower()
if method == "get":
return render(request,"article.html",{"auther":auther})
else:
title = request.POST.get("new_article_name")
contend = request.POST.get("new_article_content")
ret = models.Article.objects.create(
title = title,
desc = BeautifulSoup(contend,"html.parser").text[0:150],
comment_count =1,
up_count = 2,
down_count = 1,
category = models.Category.objects.filter(nid=1)[0],
user = models.Userinfo.objects.filter(username=auther)[0],
)
models.ArticleDetail.objects.create(
content = contend,
article = ret
) return redirect("/app1/index/")
三、利用bs4模块实现解决xss攻击
最后我们怎么解决xss攻击呢,还是需要bs4这个模块,我们需要先安装这个模块,然后导入,然后把前端发过来的字符中有scrip的标签全部删除掉
s = """<div id="headline_block" class="headline">
<ul><li class="editor_pick"><a href="https://www.cnblogs.com/xiangnanl/p/9833965.html" id="editor_pick_lnk" target="_blank">【编辑推荐】一文弄懂“分布式锁”<span id="editor_pick_count"> (2/769)</span></a> <a href="/aggsite/headline" title="查看更多编辑推荐" class="right_more">»</a></li><li><a href="https://www.cnblogs.com/coco1s/p/9913885.html" target="_blank" title="阅读726, 评论11, 推荐30">[最多推荐]你所不知道的 CSS 阴影技巧与细节(11/726)</a> <a href="/aggsite/topdigged24h" title="查看24小时推荐排行" class="right_more">»</a></li><li><a href="https://www.cnblogs.com/ryzen/p/9914827.html" target="_blank" title="阅读1409, 评论19, 推荐0">[最多评论]致C#,致我这工作一年(上)(19/1409)</a> <a href="/aggsite/topcommented24h" title="查看24小时评论排行" class="right_more">»</a></li><li><a href="https://news.cnblogs.com/n/611408/" target="_blank" title="阅读1976, 评论13, 推荐6">[新闻头条]iPhone XR产能砍掉25% 苹果供应商股价集体暴跌(13/1976)</a> <a href="https://news.cnblogs.com/" title="查看更多新闻" class="right_more">»</a></li><li><a href="https://news.cnblogs.com/n/611463/" target="_blank" title="阅读847, 评论5, 推荐9">[推荐新闻]比尔·盖茨举起一杯粪便,号召应对全球卫生危机(5/847)</a> <a href="https://news.cnblogs.com/n/recommend" title="查看更多推荐新闻" class="right_more"></a></li></ul></div>""" ret = BeautifulSoup(s,"html.parser") ret = ret.find_all("a")
# 查找所有的a标签 for label in ret: print(label.get("href"))
# 获取a标签的href的属性 print(label.name)
# 获取标签的名称 ret = BeautifulSoup(s, "html.parser") for tag in ret.find_all():
# 查找所有的标签
if tag.name == "div":
tag.decompose()
# 在字符串中删除tag.name=div的标签,这里需要注意,如果div中有包裹的标签,则会一并删除
print(ret)
bbs项目引入富文本编辑器和处理xss攻击和文章预览的更多相关文章
- 在后台管理系统中引入富文本编辑器 (vue-quill-editor)
在admin系统中引入富文本编辑器 (vue-quill-editor) 由于公司项目的需求,内容需要更新,那么自然需要admin后台来上传内容,在苦苦寻觅了N个编辑器之后,终于找到了一个比较容易使用 ...
- easyui 后台系统引入富文本编辑器的使用
1.首先,想在项目中引入相关的jar包 2.html页面中加入相关的引用 <!-- kindeditor --> <script type="text/javascript ...
- 给web项目整合富文本编辑器
给jsp页面整合富文本编辑器下载——删除多余的组件——加入到项目中——参照案例来完成整合步骤:1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下. 2. 将 ...
- csdn的富文本编辑器(html)格式的文章,添加的代码格式粘贴到项目中总是不对,我这里是maven的pom文件。
在用富文本编辑器(html)格式编辑的时候,总是出现将pom文件的配置从csdn粘贴到项目中发现很多红,是因为自己在设置的时候有问题. 因为我们的是pom.xml,这里原来设置的java呀或者js为了 ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- Django项目中添加富文本编辑器django-ckeditor
django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- 关于layui富文本编辑器和form表单提交的问题
今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
随机推荐
- 代码直连指定ip的dubbo服务
http://blog.csdn.net/buqutianya/article/details/69229384
- css样式表2
<head> <style type="text/css"> .main { height:42px; width:100%; text-align:cen ...
- idea 常见快捷键记录下
keymaps 选择的是eclipse ctrl shif u 大小写转换 ctrl o 类方法列表 ctrl shif alt u ...
- html:块级元素和行内元素的特点
display:block: 块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 块级元素width.height.padding.mar ...
- Linux主机如何用ssh去登录docker容器的步骤
进入终端,sudo -i,切换root,输入docker -d 打开另一个终端,切换root,输入docker search ubuntu,大概如下结果: NAME ...
- 点击li往数组添加对应li的id再点击移除,根据是否有class判断
if($(this).hasClass('click')){ $(this).removeClass('click'); var idAPP = $(this).attr('id'), index = ...
- 修饰词public、private、protected、默认、四者之间的区别
在Java语法中,对于类与类中的成员变量和成员方法是通过访问控制符来区分控制的. 下面来看看这四种访问控制符的区别:(public.protected.private.default) 1.publi ...
- Celery 图,[转]
https://www.cnblogs.com/forward-wang/p/5970806.html
- (转).NET Core 使用 log4net
https://blog.csdn.net/liyazhen2011/article/details/83382221 1.安装log4net 建立.NET Core工程 - 右键 - 管理N ...
- 学JS的心路历程-函式(二)arguments
参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...