Froala富文本在Vue中初始化后无法获取编辑内容怎么办？
我在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>2 条解答
vue-froala的版本是否和你的项目兼容。你已经在模板里用了
v-model绑定，这一步是对的。但是有时候Froala的初始化时机可能会影响到内容的获取。你可以尝试在nextTick里去获取编辑器的内容，确保DOM已经更新完毕。代码可以这样改一下：然后在提交表单的方法里调用
getContent。如果还是拿不到内容，可以再确认一下editorConfig里的配置是否影响了内容获取，特别是有没有禁用某些功能或者做了其他特殊设置。希望这些能帮到你，如果问题依然存在，可以打印出
this.$refs.editor看看里面的内容，可能会有更多线索。加油！this.content就能拿到内容，根本不需要调用那个 getEditor().html.get()。vue-froala 组件已经帮你处理好了双向绑定，你输入的内容会自动更新到 content 变量里。
代码给你：
如果你非要用 ref 获取实例，正确的姿势是监听事件，比如
@froalaEditor.contentChanged或者用this.$refs.editor.getEditor()...，但既然有 v-model 干嘛给自己找麻烦。还有个坑提醒一下：如果你在控制台打印 this.content 是空的，可能是时机问题。Froala 的 v-model 是响应式的，你输入的时候内容就已经在 this.content 里了，不用等什么初始化完成。
试试直接打印
console.log(this.content)看看？