[FIXED] how to design front-end of blog page with tailwind which renders data of a ckeditor django form which contains images, code snippets and text

Issue

{{blog_obj.content|safe}}

//this is the rendered part of the blog which contains the main contents of the blog. But the image sometimes has a large width which is destructuring the whole page. Is there a way to fix this?

Solution

You can set ckeditor config allowedContent and removeFormatAttributes this will allow you to add custom css class in you ckeditor

<script>
    CKEDITOR.replace('editor1');
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.config.removeFormatAttributes = '';
</script>

How you can add class to image here is the steps

Step - 1

click on this button

Step - 2

add whatever class you want to add for making image responsive

and when you submit your post it will reflect perticular tailwind css class to your post
Note: when you add class in ckeditor it will not affect in ckeditor because ckeditor doen't know about tailwind css but when you save it and render it in you page it will display as it should.
If post is added by you than you can use this method but if it used by users than there are some security best practices

Answered By - Ankit Tiwari