Froala富文本在Vue中初始化后无法获取编辑内容怎么办？

极客芳妤提问于 2026-03-12 19:25:27 阅读 2

交互

我在Vue项目里集成了Froala编辑器，初始化看起来没问题，但提交表单时调用this.$refs.editor.getEditor().html.get()总是返回空字符串，明明页面上已经输入了内容。是不是哪里配置错了？

我试过在mounted里初始化，也加了v-model绑定，但都没用。控制台也没报错，就是拿不到内容，急死了！

<template>
  <div>
    <vue-froala
      ref="editor"
      v-model="content"
      :config="editorConfig"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorConfig: { /* 配置项 */ }
    }
  }
}
</script>

富文本编辑

我来解答赞 0 收藏

反馈

1 条解答

Dev · 海利 Lv1

问题很简单，你用错方法了。既然已经绑了 v-model，直接用 this.content 就能拿到内容，根本不需要调用那个 getEditor().html.get()。

vue-froala 组件已经帮你处理好了双向绑定，你输入的内容会自动更新到 content 变量里。

代码给你：

export default {

  data() {

    return {

      content: '',

      editorConfig: {

        // 你的配置

      }

    }

  },

  methods: {

    submitForm() {

      // 直接用 this.content 就是当前编辑的内容

      console.log(this.content)

      

      // 或者在需要的地方访问

      const html = this.content

    }

  }

}

如果你非要用 ref 获取实例，正确的姿势是监听事件，比如 @froalaEditor.contentChanged 或者用 this.$refs.editor.getEditor()...，但既然有 v-model 干嘛给自己找麻烦。

还有个坑提醒一下：如果你在控制台打印 this.content 是空的，可能是时机问题。Froala 的 v-model 是响应式的，你输入的时候内容就已经在 this.content 里了，不用等什么初始化完成。

试试直接打印 console.log(this.content) 看看？

2026-03-12 20:09