Can't use emojionearea in django

I can't use emojionearea in a simple page in Django. I have followed the basics steps, listed on their website:

What I have done:

downloaded the zip from their GitHub and copied both of these files into CSS and JavaScript folder
configure django static settings e.g add to url, add static dir, add url pattern
added the script written above.

Code:

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TODO</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'css/emojionearea.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/main.css' %}">

    </head>

    <body>
        {% include 'navbar.html' %}
        {% block content %}


        {% endblock content %}
        <script>
            $(document).ready(function() {
                $("#mytextarea").emojioneArea();
            })
        </script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="{% static 'js/emojionearea.min.js' %}"></script>

    </body>
</html>

and this is the form text area I want to add the emoji to:

<form method="post" action="" class="edit">
    {% csrf_token %}
    <div class="form-row">
        <div class="col-12">
            <label for="inputTask">Tweet:</label>
            <textarea class="form-control" placeholder="Enter Tweet:" name="tweet" id="mytextarea"></textarea>
        </div>
        <div class="col-10">
            <label for="inputTime">Image:</label>
            <input type="file" class="form-control" placeholder="select image:" name="images">
        </div>
        <div class="col-2" style="margin-top: 35px;">
            <button type="submit" class="btn btn-outline-primary float-right">Add Tweet</button>
        </div>
    </div>
</form>

I have also tried putting textarea out of form tag and do the stuff on it, but still no effect

Can't use emojionearea in django

0 Answers