1

Не могу корректно реализовать добавление эмоджи в поле ввода текса. Django дает вводить текст либо в forms.TextInput() или forms.Textarea(), эмоджи хранятся в <span style="background-image: url(../emoji.png)"></span>, при попытке добавления, с использованием js, в поле ввода, отображается просто html код приведенный к типу данных str. В вк например поле ввода текста в чатах это <div> и они добавляют эмоджи через <img>. Как реализовать добавление через Django форму, можно ее преобразовать так же к блоку например или есть условия при которых input.value или textarea.innerHTML отобразят html тег как мне это нужно?

Скрипт js:

    <script>
        var input_message = document.getElementById('id_message');
        var emoji_box = document.getElementById('emoji-box');
        var emoji_scroll_div = emoji_box.querySelector('.emoji-mart-scroll');
        emoji_scroll_div.addEventListener('mouseover', showemoji);
        function showemoji(event) {
            event.preventDefault();
            var emoji_targ = event.target;
            if (emoji_targ.closest('.emoji-mart-emoji')){
                var emoji_span = emoji_targ.closest('.emoji-mart-emoji');
                emoji_targ.addEventListener('click', function () {
                    input_message.value = emoji_span.innerHTML;
                })
            }
        }
    </script>

Форма:

class MessageForm(forms.ModelForm):

    class Meta:
        model = Message
        fields = ['message']
        labels = {
            'message': ''
        }
        widgets = {
            'message': forms.TextInput(attrs={'class': 'form-control'})
        }

Отображение формы:

<form id="message-form" class="panel panel-body" method="post">
                
    <input type="hidden" name="csrfmiddlewaretoken" 
     value="">
    <input type="text" name="message" class="form-control" required="" id="id_message">
    <button type="submit" class="btn btn-default btn-sm"><span class="ico ico-comment"> 
    </span>Отправить</button>
</form>

Реализация в вк для примера:

<div class="im_editable im-chat-input--text _im_text" tabindex="0" contenteditable="true" id="im_editable0" role="textbox" aria-multiline="true">

"Привет&nbsp;" <img class="emoji" src="/emoji/e/f09f988a.png" alt="😊">

</div>
1
  • Попробуйте посмотреть на widgets docs.djangoproject.com/en/3.1/ref/forms/widgets Вам наверное придется написать свой основываясь на существующем или с 0
    – Tr1nks
    26 ноя 2020 в 13:13

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.