So I'm scouring the internet and it seems as though I'm having the same problem as this issue here.
Basically to a T, I'm experiencing what that user experienced;
I've tried several HTML/Text editors (I'm sticking with Vue2-Editor now), and when I save a post it seems as though the v-html
method doesn't do what it's supposed to or I am implementing something incorrectly.
HTML - Display Post
<div class="message" v-show="announcement.active" :class="{active: announcement.active}">
<div v-html="announcement.message"></div>
</div>
HTML - Edit Post
<div v-if="announcement.editing" class="update-inner-wrapper editing">
<header class="announcement-header">
<h3 class="date">{{ announcement.date | moment("MM/DD/YYYY") }}</h3>
<input class="title" v-model="announcement.title">
<div class="save-btn">
<button v-if="announcement.editing" @click="editUpdate(announcement, announcement.id)" class="edit">Save <svg class="icon"><use href="#approve"></use></svg></button>
</div>
</header>
<div class="message">
<vue-editor v-model="announcement.message"></vue-editor>
</div>
</div>
HTML - Add Post
<section class="super-user-options" v-show="openPost">
<h2>Add a Post</h2>
<div class="form-wrapper">
<div class="super-user-form">
<div class="flex dt">
<div class="date-title">
<input placeholder="Enter a Title" v-model="newUpdate.title">
</div>
<mq-layout mq="desktop+">
<button type="submit" @click="addUpdate()" class="add-post-button">
Add Update
</button>
</mq-layout>
</div>
<div class="flex text">
<vue-editor v-model="newUpdate.message"></vue-editor>
<mq-layout mq="mobile">
<button type="submit" @click="addUpdate()" class="add-post-button">
Add Update
</button>
</mq-layout>
</div>
</div>
</div>
</section>
JS - CUD Ops
async addUpdate(){
const user = await applicationUserManager.getUser()
let today = new Date().toJSON().slice(0,10).replace(/-/g,'-');
let newUpdateData = {
"date": today,
"message": marked(this.newUpdate.message, { sanitize: true }),
"title": this.newUpdate.title
}
this.OPENPOSTDIALOGUE();
this.UPDATE_KEY(this.componentKey += 1);
axios.post(this.announcementUrl, newUpdateData, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
.then(
axios.get(this.announcementUrl).then(response => {
this.announcements = response.data
})
)
},
//EDITUPDATE
async editUpdate(announcement, id){
const user = await applicationUserManager.getUser()
let newUpdateData = {
"id": announcement.id,
"date": announcement.date,
"message": marked(announcement.message, { sanitize: true }),
"title": announcement.title
}
this.UPDATE_KEY(this.componentKey += 1);
axios.put(this.announcementUrl + "/" + id, newUpdateData, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
axios.get(this.announcementUrl).then(response => {
this.announcements = response.data
})
},
//DELETE UPDATE
async deleteUpdate(announcement, id){
const user = await applicationUserManager.getUser()
axios.delete(this.announcementUrl + "/" + id, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
this.UPDATE_KEY(this.componentKey += 1);
axios.get(this.announcementUrl).then(response => {
this.announcements = response.data
})
},
What am I doing wrong?
The rich text editor is returning a html string which can be directly used in v-html.
So replace marked(announcement.message, { sanitize: true })
With: "message": announcement.message
Here's an example using CKeditor: https://jsfiddle.net/ellisdod/5g1cptjb/