lytcreate. 2021-01-17 11:12 采纳率: 37.5%
浏览 11
已采纳

django页面问题

页面代码:

{% extends 'base.html' %}
{% block live1 %}<title>{{ daily_list.2 }}---</title>

{% endblock %}
{% block live3 %}
<div class="read_pic">
    <div class="read_title">
        {{ daily_list.2 }}
    </div>
</div>
{##个人日志飞机蓝色&#9812,时间&#9770,浏览&#10052橙色,喜欢心型红色&#10084,评论三叶草绿色&#9752#}
<div class="read_title_li">
    <label class="read_title_li1">&#9812 个人日志</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="read_title_li2">&#9770 {{ daily_list.7 }}</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="read_title_li3">&#10052 {{ daily_list.4 }}</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="read_title_li4">&#10084 {{ daily_list.5 }}</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="read_title_li5">&#9752 {{ daily_list.6 }}</label>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
{#    正文#}
<div class="read_content">
    {{ daily_list.3|safe }}

</div>
{#    作者专利说明#}
<div class="read_writer">
本文作者:Liveblog <br>
本文仅代表作者个人观点,转载请注明来源。
</div>
{#    喜欢#}
<div class="read_like">
<div class="read_likes">
    <a href="#"><img src="../static/images/like.png"></a>
</div>
</div>
{#    上下篇#}
<div class="read_up_down">
<div class="read_up">
    {% if up == '没有上一篇了' %}
上一篇:<a href="#">{{ up }}</a>
    {% else %}
    上一篇:<a href="daily.html?read={{ ups }}">{{ up }}</a>
    {% endif %}
</div>
<div class="read_down">
     {% if down == '没有下一篇了' %}
下一篇:<a href="#">{{ down }}</a>
    {% else %}
    下一篇:<a href="daily.html?read={{ downs }}">{{ down }}</a>
    {% endif %}
</div>
</div>
{#主评论区#}
    <form method="post" name="form1">{% csrf_token %}
<div class="read_comments"><input type="text" value="{{ daily_list.0 }}" hidden="hidden" name="did">
<label>#&nbsp;</label>评论区
</div>
<div class="read_name">
<div class="read_nicheng">
    昵称<label>*</label>
</div>
<div class="read_nichenginput">
<input placeholder="NAME" name="name" type="text">
</div>
</div>
<div class="read_comment">
<textarea id="read" name="comments"></textarea>
</div>
<div class="read_button">
<button type="submit" onclick="fun1()">发表</button>
</div>
</form>

{% for com in com_list %}
{#    具体评论信息#}
<div class="read_pl">
{#单个评论信息#}
<div>
{#    头像,昵称,时间#}
    <div>
        <div class="read_headimage"><img src="../static/headimages/{{ com.pic }}.png"></div>
        <div class="read_nickname">{{ com.username}}</div>
        <div class="read_time">{{ com.publicationdate }}</div>
    </div>
{#    评论内容#}
    {% if com.dadname == '0' %}
    <div class="read_plnr">{{ com.content|safe }}&nbsp;&nbsp;<span class="layui-badge layui-bg-orange" id="reply" style="cursor: pointer;">回复</span></div>
    {% else %}
    <div class="read_plnr"><label style="color: orange">@{{ com.dadname }}:</label>{{ com.content|safe }}&nbsp;&nbsp;<span  id="reply" class="layui-badge layui-bg-orange" style="cursor: pointer;">回复</span></div>
    {% endif %}
{#    下面是子评论富文本框#}
    <form method="post" name="form2">{% csrf_token %}<input name="articleid" type="text" hidden="hidden" value="{{ com.articleid }}">
        <input type="text" name="dadid" hidden="hidden" value="{{ com.id }}"><input type="text" value="{{ com.username }}" name="dadname" hidden="hidden">
        <div id="edit" class="read_comment1"><div class="read_nichenginput1"><input name="uname" placeholder="NAME"></div><br>
            <textarea id="read1" name="ucomments"></textarea><br><div class="read_comment2"><button class="replay1" type="button">取消</button> &nbsp;&nbsp;<button type="submit" onclick="fun2()">回复</button></div></div>
    </form>
</div>
{#    分割线#}
</div>
<hr class="read_hr">
{% endfor %}


<div class="home_bottom_bottom"></div>
<script type="text/javascript">
        function fun1() {
            document.form1.action="daily.html";
            document.form1.submit();
        }
        function fun2() {
            document.form2.action="publishcomments.html";
            document.form2.submit();
        }
    </script>
    <script type="text/javascript">
    layui.use('layedit', function(){
    var layedit = layui.layedit;
    layedit.build('read', {
        height: 140, //设置编辑器高度
        tool: ['face']
});
    var layedit1 = layui.layedit;
    layedit1.build('read1', {
        height: 140, //设置编辑器高度
        tool: ['face']
});
});
</script>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".layui-badge layui-bg-orange").click(function(event){
		$(this).closest(".read_pl").find(".read_comment1").show();
	});
	$(".replay1").click(function(event){
		$(this).closest(".read_pl").find(".read_comment1").hide();
	});
});
</script>
{% endblock %}

需要实现的是:在原来的基础上,子评论显示layui的富文本编辑器,然后主评论区和子评论提交到不同的后台地址(js中已给出form1和form2),尽量不更改class名字,因为牵扯到样式问题。谢谢!

 

展开全部

  • 写回答

3条回答 默认 最新

  • 天际的海浪 2021-01-17 13:32
    关注

    多个layui富文本编辑器的问题可以给每个textarea 动态设置不同的id,并循环调用layedit1.build()

    <textarea id="read1" class="read_textarea" name="ucomments"></textarea> 

    <script type="text/javascript">
    layui.use('layedit', function(){
        var layedit = layui.layedit;
        layedit.build('read', {
            height: 140, //设置编辑器高度
            tool: ['face']
        });
        var textarea = document.getElementsByClassName("read_textarea");
        for (var i = 0; i < textarea.length; i++) {
            textarea[i].id = "read"+(i+1);
            var layedit1 = layui.layedit;
            layedit1.build(textarea[i].id, {
                height: 140, //设置编辑器高度
                tool: ['face']
            });
        }
    });
    </script>
     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部