在提交按钮 Crispy Form 上使用 HTML 元素和 {{user.userprofile.image.url}}

Question

希望你一切顺利。你知道我如何将它添加到我的按钮吗：

<img src="{{user.userprofile.image.url}}" width="22px" height="22px" style="border-radius: 90px;background: #ffffff38;">

我试过了，但它在我的页面上总是被翻译成“评论”。

class CreateCommentForm(forms.ModelForm):
    def __init__(self,*args,**kwargs):
        super(CreateCommentForm, self).__init__(*args,**kwargs)
        self.helper = FormHelper()
        self.helper.form_method="post"
        self.helper.layout = Layout(
            Field("content",css_class="form-control",style="margin-bottom:10px",rows="1"),
        )
        
        self.helper.add_input(Submit('submit','<img src="{{user.userprofile.image.url}}" width="22px" height="22px" style="border-radius: 90px;background: #ffffff38;"> Comment',css_class="btn btn-sm",style="background-color: #0d6ec5;border-color: #0d6ec5;"))


    class Meta:
        model = Comment
        fields = [
            'content'
        ]

Answer 1

您似乎在尝试解决两个挑战：在表单按钮中包含动态信息 (userprofile.image)，然后使用包含 image/HTML 内容的提交按钮。

在表单中包含动态信息：您需要将 kwarg/parameter 添加到表单的 init 方法中，以便您可以在视图中创建表单对象时传递用户。
而不是使用 Crispy 的 Submit button (which creates an input element), you should use StrictButton instead, which creates a button element, and can be filled with whatever HTML you'd like. I'll note that the docs for StrictButton are in a weird spot: https://django-crispy-forms.readthedocs.io/en/latest/layouts.html, separate from the docs on the various buttons. Also worth noting that you could simply use the Button class in a similar fashion, but the StrictButton class has some frills that make life easier for those using Bootstrap. (Check out the crispy_forms.bootstrap module 来了解更多信息。）

以下是我将如何更新您的代码：

# View function:
def my_view(request):
    ...
    comment_form = CreateCommentForm(user=request.user)
    ...


# Forms:
from crispy_forms.bootstrap import StrictButton

class CreateCommentForm(forms.ModelForm):

    # Adding the user kwarg here:
    def __init__(self, user, *args, **kwargs):
        super(CreateCommentForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = "post"
        
        # Set up the HTML content for the StrictButton:
        button_content = f'<img src="{user.userprofile.image.url}" width="22px" height="22px" ' \
                         f'style="border-radius: 90px;background: #ffffff38;"> Comment'
                         
        self.helper.layout = Layout(
            Field("content", css_class="form-control", style="margin-bottom:10px", rows="1"),
            
            # Add the button to the layout:
            StrictButton(button_content, type='submit', css_class='btn btn-primary btn-block', id='save'),
        )

    ...

在提交按钮 Crispy Form 上使用 HTML 元素和 {{user.userprofile.image.url}}

Use HTML element and {{user.userprofile.image.url}} on Submit button Crispy Form

python

django

django-crispy-forms