關於 django-ckeditor 前段使用的一個問題

Bgods發表於2020-07-20
Django

問個問題，我Django寫的評論，前端使用的是富文字編輯器ckeditor，js實現了點選回覆按鈕自動移動表單，但是有個問題。

第一次開啟頁面時候可以正常使用:

點選回覆按鈕後，表單移動後ckeditor無法使用:

評論內容，如果不是使用ckeditor，使用textarea是可以的。
以下是相關程式碼:

評論forms：

# forms.py
class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ['content']

評論models：

# models.py
...
class Comment(models.Model):
    post = models.ForeignKey('blog.Post', on_delete=models.CASCADE, verbose_name=u'部落格')
    parent_id = models.IntegerField(blank=True, default=0, verbose_name=u'父級評論id')
    reply_id = models.IntegerField(blank=True, default=0, verbose_name=u'回覆id')

    content = RichTextUploadingField(verbose_name=u'評論內容', config_name='comment')
...

模板中使用評論表單：

{% load static %}
<article class="post white-box comments">
    <section class="article typo">
        <p ct=""><i class="fas fa-comments"></i> 評論</p>
        <section id="comments">
            <div id="valine_container" class="valine_thread v" data-class="v">

                <!-- 評論提交表單區 -->
                <div id="comments-post" class="vreply-wrapper" parent-id="0" reply-id="0">
                    <div class="vpanel" id="comment-vpanel">
                        <div class="vwrap">
                            <form action="{% url 'comment:post_comment' post.id %}" method="post" id="comment-form">{% csrf_token %}
                                <input name="parent_id" id="parent_id" type="hidden" value="0">
                                <input name="reply_id" id="reply_id" type="hidden" value="0">
                                <input name="redirect_url" id="redirect_url" type="hidden" value="#comments-post">

                                <p class="cancel-reply text-right" style="display: none;" title="取消回覆">
                                </p>
                                <div class="vheader item3">
                                    <input name="nick" id="nick" placeholder="暱稱" class="vnick vinput" type="text" style="width: 49.5%;" required="required">
                                    <input name="mail" id="mail" placeholder="郵箱" class="vmail vinput" type="email" style="width: 49.5%;" required="required">
                                </div>
                                <div class="vedit">
                                    <!--
                                    <textarea name="content" id="content" class="veditor vinput" placeholder="評論內容!" form="comment-form" required="required"></textarea>
                                    -->
                                    {{ comment_form.media }}
                                    {{ comment_form.content }}

                                </div>
                                <div class="vrow"><input  title="提交評論" class="vsubmit vbtn" style="float: right;" type="submit" value="提交" /></div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 評論數 -->
                <div class="vcount" style="display: block;"><span class="vnum">{{ comments_dict.count }}</span> 評論</div>

                <!-- 評論顯示區 -->
                <div class="vcards">
                    {% for comment_id,comments in comments_dict.comments.items %}
                        <div class="vcard" id="comment-{{ comment_id }}">
                            <img class="vimg" src="{{ comments.comment.avatar }}">

                            <div class="vh">
                                <div class="vhead"><a class="vnick" rel="nofollow">{{ comments.comment.nick }}</a><span class="vsys">{{ comments.comment.browser }}</span><span class="vsys">{{ comments.comment.client }}</span></div>
                                <div class="vmeta">
                                    <span class="vtime">{{ comments.comment.add_time | date:'Y-m-d  H:i:s' }}</span>
                                    <span class="vat reply_btn">回覆</span>
                                </div>
                                <div class="vreply-wrapper" parent-id="{{ comment_id }}" reply-id="{{ comment_id }}"></div>
                                <div class="vcontent"><p>{{ comments.comment.content | safe }}</p></div>

                                <!-- 子評論 -->
                                <div class="vquote">
                                    {% for reply in comments.reply %}
                                    <div class="vcard" id="comment-{{ reply.id }}">
                                        <img class="vimg" src="{{ reply.avatar }}">
                                        <div class="vh">
                                            <div class="vhead"><span class="vnick">{{ reply.nick }}</span> <span class="vsys">{{ reply.browser }}</span> <span class="vsys">{{ reply.client }}</span></div>
                                            <div class="vmeta">
                                                <span class="vtime">{{ reply.add_time | date:'Y-m-d H:i:s' }}</span>
                                                <span class="vat reply_btn">回覆</span>
                                            </div>
                                            <div class="vreply-wrapper"  parent-id="{{ comment_id }}" reply-id="{{ reply.id }}"></div>
                                            <div class="vcontent"><p><a href="#comment-{{ reply.reply_id }}" target="_self" rel="nofollow">@{{ reply.to_nick }} </a>, {{ reply.content | safe }}</p></div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </section>
</article>

實現移動表單的js程式碼：

const update_from = function() {
    // 獲取回覆輸入框父級物件
    const vreply_wrapper = document.getElementById("comment-vpanel").parentNode;

    // 回覆表單的預設資料
    document.getElementById('parent_id').setAttribute('value', vreply_wrapper.getAttribute('parent-id'));
    document.getElementById('reply_id').setAttribute('value', vreply_wrapper.getAttribute('reply-id'));
};


$(function(){
    //頁面載入完畢後開始執行的事件

    // 回覆按鈕
    $(".reply_btn").click(function(){
        $(this).parent().parent().children('.vreply-wrapper').append($("#comment-vpanel"));
        update_from();  // 更新
        document.querySelector('p.cancel-reply').style.display = 'block';  // 顯示取消回覆按鈕
    });

    // 取消回覆按鈕
    $('p.cancel-reply').click(function(){
        $('#comments-post').append($("#comment-vpanel"));
        update_from();  // 更新表單移動後的資料
        document.querySelector('p.cancel-reply').style.display = 'none';  // 隱藏取消回覆按鈕
    });
});
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章