首页 > 其他分享 >文章添加页(富文本编辑器的使用)

文章添加页(富文本编辑器的使用)

时间:2022-10-10 22:12:08浏览次数:51  
标签:category 文本编辑 list request 添加 文章 article tag id

1.文章添加页url开设

image

2.添加文章页面已经富文本编辑器的使用

富文本编辑器kindeditor只要到官网下载下来,放入static文件夹就行,如何在html的script处添加对应固定代码


{% extends 'backend/base.html' %}

{% block article %}
    <h3>添加随笔</h3>
    <form action="" method="post">
        <p>标题</p>
        <div>
            <input type="text" class="form-control" name="title">
        </div>
        <p>内容</p>
        <div>
            <textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
        </div>
        <p>分类</p>
        <div>
            {% for category in category_list %}
                <input type="radio" value="{{ category.pk }}" name="category">{{ category.name }}&nbsp;
            {% endfor %}
        </div>
        <p>标签</p>
        <div>
            {% for tag in tag_list %}
                <input type="checkbox" value="{{ tag.pk }}" name="tag">{{ tag.name }}&nbsp;
            {% endfor %}
        </div>
        <br>
        <input type="submit" class="btn-danger  btn">
    </form>
{% endblock %}

{% block js %}
    <script charset="utf-8" src="/static/kindeditor-4.1.11-zh-CN/kindeditor/kindeditor-all-min.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id',
                {
                    width: '100%',
                    height:'600px',
                    resizeType:1,
                });
        });
    </script>
{% endblock %}

3.后端需要传入到前端的数据

image

4.添加文章向后端发送请求

@login_required
def add_article(request):
    category_list = models.Category.objects.filter(blog=request.user.blog)
    tag_list = models.Tag.objects.filter(blog=request.user.blog)
    if request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        category_id = request.POST.get('category')
        tag_id = request.POST.getlist('tag')
        # 文章简介的获取
        desc = content[0:150]
        article_obj = models.Article.objects.create(title=title,desc=desc,content=content,category_id=category_id,blog=request.user.blog)
        # 下一步添加文章和文章标签表,这个关系表是我们自己创建的无法使用add等方法
        # 解决方法自己操作关系表,因为是多对多关系,可能需要创建多条数据 采用了批量插入数据的方法
        article_obj_list = []
        for i in tag_id:
            article_obj_list.append(models.Article2Tag(article=article_obj,tag_id=i))
        models.Article2Tag.objects.bulk_create(article_obj_list)
        return HttpResponseRedirect('/backend/')
    return render(request,'backend/add_article.html',locals()) 

标签:category,文本编辑,list,request,添加,文章,article,tag,id
From: https://www.cnblogs.com/suncolor/p/16777620.html

相关文章

  • .net6 api添加接口注释
    参照:.NET6Swagger添加xml注释-凡尘一叶~-博客园(cnblogs.com)【这个比较准】.netcore的Swagger接口文档使用教程(一):Swashbuckle-没有星星的夏季-博客园(cnbl......
  • Visual Studio中根据已有代码片段,添加自定义的
    举例:在VS中创建自定义代码片段(snippet),例如for+两次tab键,属性prop+两次tab键等。以propfull为例,步骤如下:1,查看VS中代码片段位置2,snippet文件地址3,复制出来prop......
  • 我对软件工程的理解(之前写在“文章”一栏中,故再发一次)
     作为一个化学专业的学生,我对软件工程的理解还比较粗浅,辅修计算机是认为在当今时代计算机不仅是一门科学,也是一项强大的工具。我认为软件工程致力于构建有效、实用、高......
  • 在element-ui控件el-select与el-input中前面添加icon图标
     在el-input中可以通过 prefix-icon(首部)和 suffix-icon(尾部) 属性在input组件增加显示图标,也可以通过slot来放置图标。如下图:  代码如下:<divclass="demo-i......
  • 10.9 闲话 —— 对一篇文章的一些看法
    昨晚写了一堆话,想了想还是删掉了。今天得知《实事求是,面向未来》的作者是一位高二同学,并且他自己也没有带智能手机,那这篇文章的目的也就很明显了。不得不说,作者本人似乎......
  • .net6 Api添加跨域
    参照:(7条消息).net6使用最小api(8)—开启跨域模式,通过扩展服务实现_hailang2ll的博客-CSDN博客步骤:一、在appsetting.json里添加配置文件//配置文件如上:"Cors":{"En......
  • 文章的评论(跟评论与子评论的制作)
    文章的评论制作先做跟评论,在做子评论发表评论框的制作:前端渲染发表评论框:{#评论功能开始#}{%ifrequest.user.is_authenticated%}<div>......
  • 怎么将压缩包添加到表格文件中
    在表格文件中,将插入栏打开  然后选择属性中的对象选项  点击选择左侧的由文件创建选项  在这里可选择本地文件上传,点击浏览选项然后找到压缩包位置,点......
  • 921. 使括号有效的最少添加
    921.使括号有效的最少添加只有满足下面几点之一,括号字符串才是有效的:它是一个空字符串,或者它可以被写成 AB (A 与 B 连接),其中 A和 B 都是有效字符串,或者......
  • ETCD 未授权访问漏洞-添加iptables规则修复方法
    ⻛险提⽰1.在iptables规则配置正确的情况下,可以规避未认证的漏洞;2.如变更过程中误操作限制了其他端⼝的情况下可能会造成存储异常;影响版本所有版本问题描述:客⼾采......