# Tinymce 富文本組件位于 [src/components/TinyMce](https://github.com/vbenjs/vue-vben-admin/tree/main/src/components/Tinymce) ::: tip 富文本組件使用的是 CDN 方式引入 可在 [/@/components/TinyMce/src/Editor.vue](https://github.com/vbenjs/vue-vben-admin/tree/main/src/components/Tinymce/src/Editor.vue) 更改下面 CDN 地址 ```ts const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1'; ``` ::: ## Usage ```vue <template> <Tinymce v-model="value" @change="handleChange" width="100%" /> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { Tinymce } from '/@/components/Tinymce/index'; export default defineComponent({ components: { Tinymce }, setup() { const value = ref('hello world!'); function handleChange(value: string) { console.log(value); } return { handleChange, value }; }, }); </script> ``` ## Props | 屬性 | 類型 | 默認值 | 說明 | | --------------- | ----------------- | ------ | ---------------- | | options | `any` | {} | tinymce 的配置項 | | value(v-model) | `string` | - | 雙向綁定值 | | height | `number , string` | 400 | 高度 | | width | `number , string` | auto | 寬度 | | toolbar | `string[]` | - | 工具欄 | | plugins | `string[]` | - | 插件 | | showImageUpload | `boolean` | true | 是否顯示上傳按鈕 | ## Events | 事件 | 回調參數 | 返回值 | 說明 | | ------ | ------------------ | ------ | ---------------------- | | change | `(str:string)=>{}` | | 富文本內容改變觸發事件 |