CODEWITHSUNDEEP
djangodjango-viewsckeditor
StephenKernan
StephenKernan

Reputation: 757

Safe filter Still Displays HTML Tags

I have added CKEditor to my django project, but the text is still showing HTML tags. Despite the fact that I have the safe filter inserted following my content variable. Am I missing the reason that this will not escape the HTML tags?

Here is my model: 

class Post(models.Model):
    title = models.CharField(max_length = 100)
    content = RichTextUploadingField(blank=True, null=True)
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    image = models.ImageField(default='default.jpg', upload_to='post_pics')

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('post-detail', kwargs={'pk': self.pk})

Here is my form template: 

    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class='border-bottom mb-4'>New Post</legend>
            {{ form.media }}
            {{ form | crispy }}
        </fieldset>
        <div class="form-group">
            <button type="submit" class="btn btn-outline-info">Upload</button>
            <a type="submit" class="btn btn-outline-secondary" href="/">Cancel</a>
        </div>
    </form>

Here is my post detail template:

<article class="media content-section">
    <img src="{{ post.author.profile.image.url }}" alt="profile photo" class="rounded-circle article-img">
    <div class="media-body">
        <img src="{{ post.image.url }}" class="post-img">
        <div class="article-metadata">
            <a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
            <small class="text-muted">{{ object.date_posted | date:'F d, Y'}}</small>
            {% if object.author == user %}
            <div>
                <a href="{% url 'post-update' object.id %}" class="btn btn-outline-secondary btn-sm mt-1 mb-1">Edit</a>
                <a href="{% url 'post-delete' object.id %}" class="btn btn-outline-danger btn-sm mt-1 mb-1">Delete</a>
            </div>
            {% endif %}
        </div>
        <h2 class='article-title-detail'>{{ object.title }}</h2>
        <p class="article-content">{{ object.content | safe }}</p>
    </div>
</article>

On my form page, it allows me to see the text as it should appear. However, on the detail view template, it is still showing the HTML tags and stylings rather than the formatted text.

Upvotes: 0

Views: 563

Answers (2)

Rohit D H
Rohit D H

Reputation: 41

I too face the same problem, the thing is:

when u have multiple CKEditor contents to display in the same webpage, then only the top one displays properly, and in the remaining " <p {{ content_of_ckeditor|safe }}</p> " will display some HTML texts.. not the proper content.

In your views.py, before saving the CKEditor content to model, if you have like this:

    content_save = ckeditorForm(request.POST, request.FILES)
    content_save = ModelName(content=content, user=user, post=post)
    content_save.save()

then it does not display properly, so change it to

    content_save = ckeditorForm(request.POST, request.FILES)
    content_save = ModelName(content=content, user=user, post=post)
    content_save = content_save['content'].value()    #add this
    content_save.save()

So, it will display properly when u use <p {{content_of_ckeditor|safe}} </p> in yout template.

Upvotes: 0

StephenKernan
StephenKernan

Reputation: 757

I figured out the reason for this. After some searching, I realized that the variable content is being sent to the browser wrapped in <p> tags and nested paragraph tags are improper HTML.

Upvotes: 0

Related Questions