Создание форм с несколькими типами ввода

#django #html #python-3.5

#django #HTML #python-3.5

Вопрос:

Я пытаюсь создать поле формы ввода, которое может принимать текст, изображения или видео, как мы видим в Twitter.

Я пытаюсь сделать следующее:

 from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))
  

Который создает введите описание изображения здесь

Тем не менее, я пытаюсь использовать одно и то же поле ввода, чтобы пользователь мог загружать изображения, видео, GIF-файлы или просто вводить текст в поле. Я не уверен, как изменить указанное выше поле формы.

Редактировать: если это невозможно с помощью Django, можно ли это сделать с помощью HTML5?

Комментарии:

1. Чтобы уточнить, вы имеете в виду, что хотите отображать изображение, когда пользователь загружает его?

Ответ №1:

введите описание изображения здесь

Для этого вам следует использовать редактор WYSIWYG, подобный редактору Froala

Использование

 from django import forms
from froala_editor.widgets import FroalaEditor

 class PageForm(forms.ModelForm):
     content = forms.CharField(widget=FroalaEditor)
  

Ответ №2:

Вы пробовали использовать плагин WYSIWYG? Django summernote может сработать https://github.com/summernote/django-summernote

Затем вы могли бы установить для виджета значение SummernoteWidget в форме

Ответ №3:

Для добавления загрузки файлов в Django форму вам нужно добавить FileField в свой класс form.

Обновите свой forms.py как показано ниже.

 from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))
    file = forms.FileField(label="Upload file", blank=True)
  

Это отобразило бы отдельное поле файла, чтобы пользователь мог загружать изображения и другие файлы.

Комментарии:

1. Этот метод может загружать файл, но он не создает окно типа Twitter, в котором изображение отображается на дисплее немедленно.