在Web开发中，富文本编辑器是一个非常常见的功能。vue-tinymce是基于Vue实现的一个富文本编辑器组件，具有易用、高度可定制和功能强大的特点。本文将介绍vue-tinymce如何在Vue中获取编辑器内容。

vue-tinymce使用了TinyMCE作为其核心编辑器，TinyMCE是一个非常流行的富文本编辑器，被广泛应用于各种Web应用中。在使用vue-tinymce时，需要安装依赖并注册组件，然后即可在Vue组件中使用。

npm install --save vue-tinymce

import { Editor } from '@tinymce/tinymce-vue';
Vue.component('editor', Editor);

在模板中使用editor组件，并将v-model指向一个Vue组件中的数据属性。在编辑器内容发生变化时，会自动更新数据属性值。

<template>
<editor v-model="content" :init="tinymceInit"></editor>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
methods: {
tinymceInit(editor) {
editor.on('Change', () => {
this.content = editor.getContent();
});
}
}
}
</script>

通过content属性即可获取到编辑器中的内容。如果需要在表单提交时将内容提交到后端服务器，可以将内容保存到Vue实例中的一个属性中。

<template>
<form @submit.prevent="onSubmit">
<editor v-model="content" :init="tinymceInit"></editor>
<button>提交</button>
</form>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
methods: {
tinymceInit(editor) {
editor.on('Change', () => {
this.content = editor.getContent();
});
},
onSubmit() {
const data = {
content: this.content,
};
// 提交数据到服务器
},
},
}
</script>

总之，在Vue中使用vue-tinymce获取内容非常方便。只需要将v-model指向一个数据属性，并在tinymceInit()方法中监听编辑器内容变化，并将内容保存到数据属性中即可。