在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()方法中監聽編輯器內容變化，并將內容保存到數據屬性中即可。