Django 项目试炼blog -- 文本编辑器的使用（文件存储，预览）

Posted 2021-10-28 zhuzhiwei-2019

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过滤切割，过滤掉数据中的标签名