vue.js - Vue html/文本编辑器 v-html 在发布/放置（添加/编辑）时不起作用

问题描述

所以我在网上搜索，好像我在这里遇到了和这个问题一样的问题。

基本上对于 T，我正在体验那个用户所经历的；

我已经尝试了几个 HTML/Text 编辑器（我现在坚持使用 Vue2-Editor），当我保存帖子时，似乎该v-html方法没有按预期执行，或者我执行不正确。

HTML - 显示帖子

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

显示帖子示例

HTML - 编辑帖子

   <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 - 添加帖子

<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 操作

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

我究竟做错了什么？

标签： vue.jsaxioshtml-editorhtml-sanitizing

vue.js - Vue html/文本编辑器 v-html 在发布/放置（添加/编辑）时不起作用

问题描述

解决方案

推荐阅读