javascript - 当文本和图像都在模型中时，在 Django 中的文本之间插入图像

Question

我正在寻找一种在我用 django 制作的博客文本之间插入图像的方法。我想要实现的是如下图所示:

如您所见，文本分为两栏。有标题、链接图像及其标题。

现在我的模型是这样的:

class Post(models.Model):
    body_col1 = models.TextField()
    body_col2 = models.TextField()
    body_col1_html = models.TextField(editable=False, blank=True, null=True)
    body_col2_html = models.TextField(editable=False, blank=True, null=True)
    image = image = models.ImageField()

文本已转换为 markdown，因此我可以在我的管理面板中添加 css 格式。所以我所做的是使用标签在 html 模板中呈现变量:

<div class="column-left">
    {{ object.body_col1_html|safe}}
</div>
<div class="column-right">
    {{ object.image}}
    {{ object.body_col1_html|safe}}
</div>

这样我就有了两列，图像位于第二列的顶部。

我正在寻找一种方法来删除文本的两个字段，所以我只有一个文本字段，我可以在文本中添加我的图像。我有一个 javascript 函数，可以自动将文本分成两列。我想要这样的东西:

<div class="columns">
    {{ object.body|safe}}
</div>

body 字段里面已经有图片了(就像我可以添加 css 或链接的方式)。

到目前为止我尝试的是在文本框中添加标签，例如 {{object.image}} 但是，由于我使用的是 markdown，它会转换为文本，所以我得到的不是我的图像，而是一个无用的字符串。

有没有办法从管理面板的正文文本框中添加图像？我可以从那里调用模板标签吗？

django博客的代码是here .

Answer 1

我认为您需要的是所谓的富文本编辑器，它可以让您根据需要构建外部 html 页面，并将它们安全地保存到数据库中的单个字段中。最受欢迎的编辑器之一是CKeditor，我建议你看看django-ckeditor