how to design front-end of blog page with tailwind which renders data of a ckeditor django form whic-CodePudding

{{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?

CodePudding user response：

You can set ckeditor config allowedContent and removeFormatAttributes this will allow you to add tailwind 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 what ever 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 inckeditor 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