css - 在 Django 2 中使用 Summernote 小部件向图像和视频添加类

Question

我正在寻找一种方法来向编辑器表单和显示表单的 html 模板中的图像和视频添加一个可以在 css 中修改的类。我正在使用 django-summernote 包中的 SummernoteInplaceWidget()，除了这个功能外它工作正常。我使用引导程序 4。

有任何想法吗？提前致谢。

表格.py：

from django.forms import ModelForm
from django_summernote.widgets import SummernoteInplaceWidget
from .models import Post


class PostFormModel(ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content', 'image', ]
        widgets = {
            'content': SummernoteInplaceWidget(attrs={'class': 'summer-img-class'}),
        }

post_form.html：

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}

    <div class="content-section">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Blog Post</legend>
                {{ form|crispy }}
                {% if form.image.errors %}
                    <div class="alert alert-danger">
                        {{ form.image.errors }}
                    </div>
                {% endif %}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Post</button>
            </div>
        </form>
        {% block jquery %}
            {{ form.media }}
        {% endblock %}
    </div>
{% endblock content %}

post_detail.html：

{% extends "blog/base.html" %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}

  <article class="media content-section">
    <div class="shadow-sm rounded row media-body">
        <div class="col-md-3 col-sm-3 col-3 align-self-center">
          <img class="rounded-circle article-img align-middle mx-auto d-none d-sm-block " src="{{ object.author.profile.image.url }}">
          <img class="rounded-circle article-img-sm align-midle mx-auto d-block d-sm-none " src="{{ object.author.profile.image.url }}"">
        </div>
        <div class="col-md-9 col-sm-9 col-9">
          <div class="article-metadata">
            <a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
            <small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
            {% if object.author == user %}
              <div>
                <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
                <a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
                </div>
            {% endif %}
          </div>
          <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ object.title }}</a></h2>
        </div>
    <div class="row media-body pt-3">
      <div class="col-md-12">
        {% if post.image %}

          <a href="{{ object.image.url  }}"><img alt="" src="{{ object.image.large.url }}" class="post_image rounded mx-auto mb-2 d-block"/></a>

        {% endif %}
         <p class="article-content ml-3">{{ object.content|safe }}</p>
      </div>
    </div>
    </div>
  </article>

{% endblock content %}

我尝试在 中添加一些样式.article-content，但没有任何效果，对于 css 中的此类也是如此（我想它可以更有效）：

.summer-img-class * {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin: auto;
}

也许它应该以某种方式用 Jquery 来完成，我不知道。

标签： cssdjangoclasswidgetsummernote