How to display contenteditable contents properly? (laravel) (vue)

I have done saved the contents inside the #descrition below.

<div contenteditable="true"></div> 

My problem is when I try to display it does not display like an html format, it displays same like the saved data with <h1></h1> & <br>. It displays plain text only.

<div contenteditable="true">{{ $description }}</div> 

The content I saved in my database & display:

<h1>Descriptoin</h1> Doner, where I built and maintained banner adverts and microsites. <br> And... 

Someone know how to display this properly?

thanks to @Akram Wahid

In laravel - {!! $description !!}
In vue - <div v-html="description"> </div>

2 Answers

You have to do like this , because Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks.If you do not want your data to be escaped, you may use the following syntax:

<div contenteditable="true">{!! $description !!}</div> 

By default Laravel escape special characters to prevent XSS attack. Try using this format:

<div contenteditable="true">{!! $description !!}</div>