I am facing a problem when develop a blog. This blog has two side. Admin side for blog management like creating, editing blogs…etc
In admin side, I integrated CKEditor and save blog content which edited by CKeditor to my database (MySQL). And as result, this content contains full of html tags and strange characters which auto-generated by CKEditor looks like this:
EX: </p> <p>Cục Quản lý Khám chữa bệnh ghi nhận đến 17h chiều 14/12, thành phố có 119 ca phải thở oxy, trong đó 6 ca thở máy.</p> <p>
So now I use Vuejs to develop the user side. I use axios in Vue component and calling api from backend to get blog’s content and want to render this in Vue component.
But after rendering, all blog’s content containts html tags. Is there any way to convert CKEditor content to plain text in Vue Component. As a expected result, I just want to display plain text (not text with full of html tags…)
If anyone has any idea, I am really grateful if you can suggest me. Thank you.
- Call Api from Vue Component:
<script>
export default {
data() {
return {
blogs: [],
};
},
async mounted() {
try {
const url = "api/blog/latest";
const result = await this.getLatestBlogs(url);
/* console.log(result); */
this.blogs = JSON.parse(result.data);
/* console.log(this.blogs); */
} catch (error) {
console.log(error);
}
},
};
</script>
*Render content in vue component but all I get is CKEditor content with many html tags as plaint text
<p>{{ blogs[0].content }}</p>