Django/CKEditor/Javascript 问题,包括 textarea 中的文本

问题描述

我正在使用 Django 开发一个论坛,该论坛允许用户相互回复(并引用原始用户)。当我做第一个回复时,这非常有效(我使用的是一行 javascript,它通过从我的视图中获取 id 并使用 django 模板更新 innerHTML 来更新 textarea,请参阅下面的 html 模板):

enter image description here

enter image description here

问题是,当我尝试引用已引用的消息时,textarea 字段中没有显示任何内容。以下是我的观点和模板:

查看

@login_required
def reply_to_post(request,pk,topic_id,post_pk):
reply = get_object_or_404(Post,topic_id=topic_id,pk=post_pk)
topic = get_object_or_404(Topic,board__pk=pk,pk=topic_id)
if request.method == 'POST':
    form = PostForm(request.POST)
    if form.is_valid():
        post = form.save(commit=False)
        post.post = reply
        post.created_by = request.user
        post.topic = topic
        user = reply.created_by
        title = post.topic
        post.save()
        
        reply.last_update = timezone.Now()
        reply.save()
        notify.send(request.user,recipient=user,actor=request.user,verb='replied to your post',target=title,nf_type='replied_by_one_user')
        reverse('home')
        
        topic_url = reverse('topic_posts',kwargs={'pk': pk,'topic_pk': topic_id})
        topic_post_url = '{url}?page={page}#{id}'.format(
            url = topic_url,id=post.pk,page=topic.get_page_count()
        )
        return redirect(topic_post_url)
else:
    form = PostForm
    
return render(request,'reply_post.html',{'topic': topic,'form': form,'reply': reply})

reply_form.html

{% load form_tags widget_tweaks %}
{% load static %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
    {% for error in form.non_field_errors %}
        <p {% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
    {% endfor %}
</div>
{% endif %}

{% for field in form %}
<div class="form-group">

    {{ field.label_tag }}

    {% render_field field class=field|input_class %}
    {% for error in field.errors %}
        <div class="invalid-Feedback">
            {{ error }}
        </div>
    {% endfor %}

    {% if field.help_text %}
        <small class="form-text text-muted">
            {{ field.help_text|safe }}
        </small>
    {% endif %}
</div>
{% endfor %}

{% block extrahead %}
<script>
document.getElementById("id_message").innerHTML = "<blockquote><i><b>{{ reply.created_by }} 
wrote:</b><br />{{ reply.message|safe }}</i></blockquote>";
</script>
{% endblock %}

reply_post.html

{% extends 'base.html' %}

{% load static %}

{% block title %}Post a reply{% endblock %}

{% block stylesheet %}
    <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
    <li class="breadcrumb-item"><a href="{% url 'board_topics' topic.board.pk %}">{{ topic.board.name }}</a></li>
    <li class="breadcrumb-item"><a href="{% url 'topic_posts'  topic.board.pk topic.pk %}">{{ topic.subject }}</a></li>
    <li class="breadcrumb-item active">Post a reply</li>
{% endblock %}

{% block content %}
    <form method="post" novalidate>
        {% csrf_token %}
        {{ form.media }}
        {% include 'includes/reply_form.html' %}
        <button type="submit" class="btn btn-success">Post a reply</button>
        {{ reply.message|safe }}
    </form>
    <div style="height: 200px; overflow: scroll;">
    {% for post in topic.get_last_ten_posts %}
        <div class="card mb-2">
            <div class="card-body p-3">
                <div class="row mb-3">
                    <div class="col-6">
                        <strong class="text-muted">{{ post.created_by.username }}</strong>
                    </div>
                    <div class="col-6 text-right">
                        <small class="text-muted">{{ post.created_at }}</small>
                    </div>
                </div>
                {{ post.get_messages_as_markdown }}
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}

奇怪的是,我可以在 textarea 之外呈现此内容(请参阅reply_post.html):

enter image description here

解决方法

找出问题,用javascript你需要用`符号封装字符串,所以javascript行是:

document.getElementById("id_message").innerHTML = `<blockquote><i><b>{{ reply.created_by }} 
wrote:</b><br />{{ reply.message|safe }}</i></blockquote>`

编码的乐趣,几个字符是问题!