Vue html/text 编辑器 v-html 在 posted/put (added/edited) 时不工作

Question

所以我正在网上搜索，似乎我遇到了与 this issue here 相同的问题。

基本上是T，我正在体验那个用户体验过的东西；

我尝试了几个 HTML/Text 编辑器（我现在坚持使用 Vue2-Editor），当我保存 post 时，似乎 v-html 方法没有' 做它应该做的，或者我正在错误地实施某些事情。

HTML - 显示 Post

    <div class="message" v-show="announcement.active" :class="{active: announcement.active}">
      <div v-html="announcement.message"></div>
    </div>

Displaying the post example

HTML - 编辑 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>

Editing the post example

HTML - 添加 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>

Adding a post example

JS - CUD 操作

  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
  })
},

我做错了什么？

Answer 1

富文本编辑器正在返回一个 html 字符串，可以直接在 v-html.

中使用

所以替换marked(announcement.message, { sanitize: true })

与："message": announcement.message

这是一个使用 CKeditor 的例子：https://jsfiddle.net/ellisdod/5g1cptjb/

Vue html/text 编辑器 v-html 在 posted/put (added/edited) 时不工作

Vue html/text editor v-html not working when posted/put (added/edited)

vue.js

axios

html-editor

html-sanitizing