How To get text editor in django frontend

Question

In my front end of django templates i want to use a text field editor like

How to achive something like this

Answer 1

You can use a external package called django rich text field https://pypi.org/project/django-richtextfield/

how to do that

check this example where the author.html have the editor on frontend

{% extends 'author_base.html' %}

{% block body %}

<div class="container">
    <div class="form-group  my-2">
        <form action="{% url 'save_article' %}" method="POST">
            {% csrf_token %}

            
                    {{form.media}}
                    {{form.as_p}}
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

</div>

{% endblock body %}

view

def add_article_page(request):
    form = article_form()
    context = {"form":form}
    return render(request,'news/add_article.html',context)

**article form **

from django import forms

    from .models import News
    from django.forms import ModelForm
    from ckeditor_uploader.fields import RichTextUploadingField
    # from ckeditor_uploader.fields import RichTextUploadingField
    
    class article_form(ModelForm):
        # body = forms.RichTextUploadingField(widget=forms.Textarea(attrs={"class":"form-control","cols":"10"}))
        class Meta:
            model = News
            fields = '__all__'
            exclude = ('writer',)

news models

class News(models.Model):
    title = models.CharField(max_length=500,blank=True,null=True)
    short_desc = models.TextField(max_length=500,blank=True,null=True)
    category = models.ForeignKey(Category,on_delete=models.PROTECT)
    main_image = models.ImageField(upload_to = "news",blank = True,null = True)
    main_image_url = models.CharField(max_length=1000,blank=True,null=True)
    writer = models.ForeignKey(author,on_delete=models.PROTECT)
    body = RichTextUploadingField(blank= True,null = True)
    meta_title = models.CharField(max_length=700,blank=True,null=True)
    meta_keyword = models.CharField(max_length=700,blank=True,null=True)
    date = models.DateTimeField(auto_now_add=True,blank=True,null=True)
    # tags = ArrayField(models.CharField(max_length=200), blank=True,size=8,null=True)
    def __str__(self):
        return self.title