Froala编辑器在Vue组件里修改数据后内容没更新

极客云碧提问于 2026-02-04 01:01:35 阅读 92

交互

在Vue项目里用Froala编辑器，通过v-model绑定数据后，手动修改数据属性，编辑器内容却不更新。比如点击按钮修改formData.content的值，页面其他地方能显示新内容，但编辑器里还是旧内容。

尝试过在mounted里调用refresh方法，也试过用this.$forceUpdate()都不行。控制台没有报错，但就是不刷新编辑器内容。代码大概是这样的：



  
  



export default {
  data() {
    return {
      formData: {
        content: '<p>初始内容</p>'
      }
    }
  },
  methods: {
    updateContent() {
      this.formData.content = '<p>新内容没显示</p>'
    },
    onEditorChange(content) {
      this.formData.content = content
    }
  }
}

是不是需要手动触发编辑器的更新？或者v-model绑定的方式有问题？求大神指点

富文本编辑

我来解答赞 10 收藏

反馈

2 条解答

打工人长春 Lv1

Froala 编辑器在 Vue 中通过 v-model 绑定数据后，如果编辑器内容没有更新，通常是因为 Froala 没有检测到内容变化。你需要手动调用编辑器实例的 html.set 方法来更新内容。

修改你的 updateContent 方法如下：

updateContent() {

  this.formData.content = '<p>新内容显示了</p>';

  if (this.$refs.froalaEditor) {

    this.$refs.froalaEditor.html.set(this.formData.content);

  }

}

这样就能强制 Froala 编辑器更新内容。

2026-02-04 16:04

小富水 Lv1

Froala编辑器在Vue里用v-model绑定的时候有个坑。编辑器初始化之后，它内部的状态是不会自动响应外部数据变化的，所以你改了formData.content，页面上其他地方能更新，但编辑器自己还是显示旧的内容。

解决办法是在修改内容之后手动调用Froala的html.set方法来更新编辑器里的内容。你可以通过ref来获取Froala实例。

代码大概是这样改的：

<template>

  <div>

    <froala :model="formData.content" @update="onEditorChange" ref="editor"></froala>



    <button @click="updateContent">更新内容</button>

  </div>

</template>



<script>

export default {

  data() {

    return {

      formData: {

        content: '<p>初始内容</p>'

      }

    }

  },

  methods: {

    updateContent() {

      this.formData.content = '<p>新内容已经更新</p>';

      // 手动刷新Froala编辑器内容

      if (this.$refs.editor && this.$refs.editor FroalaEditor) {

        this.$refs.editor FroalaEditor.html.set(this.formData.content);

      }

    },

    onEditorChange(content) {

      this.formData.content = content;

    }

  }

}

</script>

关键是调用html.set来强制更新Froala里面的内容。这样改完之后，点击按钮的时候编辑器就能正确显示最新的内容了。

踩过这个坑之后，我现在看到富文本编辑器就头疼 😂

2026-02-04 01:02