如何在博客文章中插入多张图片而不是使用文件上传字段（Django博客）

Question

我在Django Web开发方面有些基础。我已经成功添加了一个文件字段，可以在文章中上传图片（这些图片会在文章列表和详情页中显示），但如果我想在一篇文章中添加多张图片该怎么办？

我正在编写一篇教程文章，并希望在每个步骤下插入图片，以便读者更好地理解。我不想让教程只是纯文本，那么我该如何操作呢？

以下是我的models.py代码：

from __future__ import unicode_literals
from django.db import models
from django.core.urlresolvers import reverse
from django.utils import timezone
#from taggit.managers import TaggableManager


class Post(models.Model):
    author = models.ForeignKey('auth.User')
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)
    image = models.FileField(null=True, blank=True)

    #tags = TaggableManager()

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title

    def approved_comments(self):
        return self.comments.filter(approved_comment=True)

    class Meta:
        ordering = ["-pk"]

class Comment(models.Model):
    post = models.ForeignKey('blog.Post', related_name='comments')
    author = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    approved_comment = models.BooleanField(default=False)

    def approve(self):
        self.approved_comment = True
        self.save()

    def approved_comments(self):
        return self.comments.filter(approved_comment=True)

    def __str__(self):
        return self.text

这是我的forms.py文件：

from django import forms
from .models import Post, Comment

class PostForm(forms.ModelForm):

class Meta:
    model = Post
    fields = ('image','title', 'text')

class CommentForm(forms.ModelForm):

    class Meta:
        model = Comment
        fields = ('author', 'text',)

以下是需要翻译的内容：

这是我的博客文章截图，您可以看到当我包含HTML文件时，它只会发布链接。

我的博客文章

最后，以下是帖子详细信息的片段：

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

{% block content %}
 

  {% if user.is_authenticated %}
       <a class="btn btn-default pull-left" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
  {% endif %}

  <div id="post_det">
   {% if post.published_date %}
    <div class="date">
     {{ post.published_date }}
    </div>
   {% endif %}

   <h1 class="post-title">{{ post.title }}</h1>
    <img src="{{post.image.url}}" class="img-responsive blog-img"/>
    &nbsp; 
    
   <p class="post_text">{{ post.text|linebreaksbr }}</p>
   
   
  </div>
 &nbsp; 
 
 <hr>
  <a class="btn comment_button" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
  
 
 <div>
 &nbsp;  
 
  {% for comment in post.comments.all %}
  {% if user.is_authenticated or comment.approved_comment %}
   <div class="comment">
   <div class="date">
            {{ comment.created_date }}
            {% if not comment.approved_comment %}
                <a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
            {% endif %}
   </div>
   <strong>{{ comment.author }}</strong>
   <p>{{ comment.text|linebreaks }}</p>
   </div>
  {% endif %}
   {% empty %}
    <p>No comments here yet :(</p>
   {% endfor %}
 </div>
{% endblock %}

这似乎是一个微不足道的任务，我正在努力在一些文本下插入一张简单的图片。 有人能帮忙吗？非常感谢。

谢谢

山姆

- Curly77

---

所以，你的问题是想添加多张图片？还是图片无法正确渲染？ - alfonso.kim

@alfonso.kim 我想在博客文章中插入多张图片。目前我只知道如何上传一张并使其出现在文章顶部，就像我的文章详细信息片段所示 <img src="{{post.image.url}}" class="img-responsive blog-img"/> 我需要编辑models.py文件吗？谢谢。 - Curly77

Answer 1

您可以像这样手动在文本字段中添加图像 html：<img src="#">。 然后在模板中使用“safe”过滤器。因此，post.text|safe。 这将呈现您的 HTML。

但这只解决了部分问题，因为您需要一种简单的方法将图像上传到服务器并将它们插入博客文章中。

您真正需要的是所见即所得的编辑器。以下是一个列表https://djangopackages.org/grids/g/wysiwyg/

Django-ckeditor和tinymce都非常好。 您可以在它们各自的文档中找到如何设置这些内容的教程。

- chasmani

---

很高兴听到我的回答对Curly77有所帮助，你能否给我一个赞并将答案标记为解决你的问题呢？ - chasmani

我已经标记了答案并点赞了，你看不到点赞是因为我是stackoverflow上的新用户。再次感谢！ - Curly77