django项目中使用KindEditor富文本编辑器

Posted wanglfhh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django项目中使用KindEditor富文本编辑器相关的知识,希望对你有一定的参考价值。

先从官网下载插件,放在static文件下

前端引入

技术图片
<script type="text/javascript" src="/static/back/kindeditor/kindeditor-all.js"></script>


<script>
        KindEditor.ready(function (K) {
            
            window.editor = K.create(#content, {
{#                加上这句话可以使jquery能获取到富文本编辑器的内容#}
                afterBlur: function(){this.sync();},
                width: "800",
                height: "600",
                resizeType: 0,
                uploadJson: "/back/article/upload/",
                extraFileUploadParams: {
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                filePostName: "upload_img"//上传图片的名称
            });
        });
    </script>
技术图片

定义富文本编辑器在页面中的位置

<textarea id="content" name="content" style="width:700px;height:250px;"></textarea>

ajax提交

技术图片
#提交按钮
<input name="dosubmit" type="button" id="dosubmit" class="btn" value="马上发布">

# 提交富文本编辑器的内容
<script>
{#    提交文章#}
    $(#dosubmit).click(function () {
        $.post(/back/article/back_add/,$(form).serialize(),function (data) {
            if (data[status]==0){
                layer.msg(data[info])
                {#location.href="/back/index/index/"#}
            }else{
                layer.msg(data[info])
            }
        },json)
    })
</script>
技术图片

路由

# 富文本编辑器
re_path(article/upload/, article.upload, name=article/upload/),
# 接受form表单内容添加文章
re_path(article/add/, article.add, name=article/add/),

后台接收图片方法

技术图片
#富文本编辑器里上传图片
import os
def upload(request):
    """
    编辑器上传文件接受视图函数
    :param request:
    :return:
    """
    # print(request.FILES)
    img_obj=request.FILES.get("upload_img")
    # print(img_obj.name)
    path=os.path.join(settings.MEDIA_ROOT,"add_article_img",img_obj.name)
    with open(path,"wb") as f:
        for line in img_obj:
            f.write(line)
    response={
        "error":0,
        "url":"/media/add_article_img/%s"%img_obj.name
    }
    return HttpResponse(json.dumps(response))
技术图片

后台接收内容方法

技术图片
def add(request):
    member_obj=Member.objects.all()
    member_id = request.session.get(member_id)
    member_name=request.session.get(member_name)
    if request.method == POST:
        title = request.POST.get("title")
        description = request.POST.get(description)
        content = request.POST.get("content")
        addtime=time.strftime(%Y-%m-%d,time.localtime())
        # 防止xss攻击,过滤script标签
        soup=BeautifulSoup(content,"html.parser")#通过字符串创建BeautifulSoup对象,即将字符串转为对象,然后调用对象里的相关方法
        print(soup.find_all())#[<img  src="/media/add_article_img/hand.png"/>, <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>,<img src="/media/add_article_img/thumb_50_img1.jpg"  />]
        for tag in soup.find_all():

            print(tag.name)#img   script
            if tag.name=="script":
                tag.decompose()
    #     # 构建摘要数据,获取标签字符串的文本前150个符号
        desc = soup.text[0:150] + "..."
        obj=Article.objects.create(article_title=title,article_description=desc,article_content=str(content),member_id=member_id,article_addtime=str(addtime).replace(/,-))
        if obj:
            return redirect(/back/article/add/)
    return render(request,article/add.html,locals())
技术图片

页面效果

技术图片

 

done。

以上是关于django项目中使用KindEditor富文本编辑器的主要内容,如果未能解决你的问题,请参考以下文章

django admin富文本编辑kindeditor

Django内容增加富文本功能

django中集成富文本编辑器

django中富文本编辑器KindEditor的基本使用

使用KindEditor富文本编译器实现图片上传并回显

完成后台管理系统功能KindEditor富文本编辑器的使用以及商品添加的实现