diff --git a/apps/admin/package.json b/apps/admin/package.json
index 78907d9c..2ff2b218 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -26,6 +26,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@config/vite": "workspace:*",
     "@iconify/iconify": "^3.1.1",
+    "@tinymce/tinymce-vue": "^5.1.1",
     "@vben/components": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/demo": "workspace:*",
diff --git a/apps/admin/src/pages/demo/editor/rich-text-editor.vue b/apps/admin/src/pages/demo/editor/rich-text-editor.vue
new file mode 100644
index 00000000..2eea8954
--- /dev/null
+++ b/apps/admin/src/pages/demo/editor/rich-text-editor.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Editor } from '@vben/demo'
+import { ref } from "vue";
+
+let tinymceHtml = ref('<h1>hello world!</h1>')
+
+// 使用的时候自己去 https://www.tiny.cloud/auth/signup/ 申请一个key(免费的)，替换packages/demo/src/Editor/Editor.vue中的apiKey，不要用我这个
+
+function getRichContent(html: any) {
+  // 获取编辑器内容,内容变更时触发
+  // console.log(html)
+}
+</script>
+
+<template>
+    <VbenCard title="富文本组件示例"/>
+  <Editor :echo-data="tinymceHtml" @content="getRichContent" />
+</template>
+
diff --git a/packages/demo/index.ts b/packages/demo/index.ts
index 8e2de050..75b1b896 100644
--- a/packages/demo/index.ts
+++ b/packages/demo/index.ts
@@ -9,3 +9,4 @@ export { default as Basic } from './src/Basic/index.vue'
 export { default as Gaode } from './src/Charts/Gaode.vue'
 export { default as Baidu } from './src/Charts/Baidu.vue'
 export { default as Google } from './src/Charts/Google.vue'
+export { default as Editor } from './src/Editor/Editor.vue'
diff --git a/packages/demo/package.json b/packages/demo/package.json
index ada81d8d..5cacc441 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -14,14 +14,15 @@
   "license": "ISC",
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@tinymce/tinymce-vue": "^5.1.1",
+    "@vben/hooks": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
-    "@vben/hooks": "workspace:*",
     "vue": "^3.3.6"
   },
   "devDependencies": {
-    "@vben/types": "workspace:*",
-    "@amap/amap-jsapi-types": "^0.0.13"
+    "@amap/amap-jsapi-types": "^0.0.13",
+    "@vben/types": "workspace:*"
   }
 }
diff --git a/packages/demo/src/Editor/Editor.vue b/packages/demo/src/Editor/Editor.vue
new file mode 100644
index 00000000..893a4ce5
--- /dev/null
+++ b/packages/demo/src/Editor/Editor.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="tinyMCE">
+    <Editor
+      v-model="content"
+      :key="showKey"
+      ref="editor"
+      :api-key="apiKey"
+      :init="editorInit"
+    />
+  </div>
+</template>
+
+<script>
+import Editor from "@tinymce/tinymce-vue";
+import { useAppTheme } from "@vben/hooks";
+import {unref} from "vue";
+
+const { isDark } = useAppTheme()
+
+export default {
+  name: "TinyMCE",
+  components: {
+    Editor,
+  },
+  props: ["echoData"],
+  data() {
+    return {
+      content: "",
+      apiKey: "4y9t8if1rdketjbt5m8mfjotp6zsd2uxgasaexrmdo6ny3qh",
+      editorInit: {
+        language: "zh_CN",
+        selector: 'textarea#open-source-plugins',
+        plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
+        editimage_cors_hosts: ['picsum.photos'],
+        menubar: 'file edit view insert format tools table help',
+        toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
+        autosave_ask_before_unload: true,
+        autosave_interval: '30s',
+        autosave_prefix: '{path}{query}-{id}-',
+        autosave_restore_when_empty: false,
+        autosave_retention: '2m',
+        image_advtab: true,
+        link_list: [
+          { title: 'My page 1', value: 'https://www.tiny.cloud' },
+          { title: 'My page 2', value: 'http://www.moxiecode.com' }
+        ],
+        image_list: [
+          { title: 'My page 1', value: 'https://www.tiny.cloud' },
+          { title: 'My page 2', value: 'http://www.moxiecode.com' }
+        ],
+        image_class_list: [
+          { title: 'None', value: '' },
+          { title: 'Some class', value: 'class-name' }
+        ],
+        importcss_append: true,
+        file_picker_callback: (callback, value, meta) => {
+          /* Provide file and text for the link dialog */
+          if (meta.filetype === 'file') {
+            callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
+          }
+
+          /* Provide image and alt text for the image dialog */
+          if (meta.filetype === 'image') {
+            callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
+          }
+
+          /* Provide alternative source and posted for the media dialog */
+          if (meta.filetype === 'media') {
+            callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
+          }
+        },
+        height: 600,
+        image_caption: true,
+        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+        noneditable_class: 'mceNonEditable',
+        toolbar_mode: 'sliding',
+        contextmenu: 'link image table',
+        skin: unref(isDark) ? 'oxide-dark' : 'oxide',
+        content_css: unref(isDark) ? 'dark' : 'default',
+        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+      },
+      showKey: new Date().getTime(),
+    };
+  },
+  watch: {
+    content(newVal) {
+      this.$emit("content", newVal);
+    },
+    echoData: {
+      handler(newVal) {
+        if (newVal) {
+          this.content = newVal;
+        } else {
+          this.content = "";
+          this.showKey = new Date().getTime();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+};
+</script>
+
diff --git a/packages/router/src/routes/modules/demo/editor.ts b/packages/router/src/routes/modules/demo/editor.ts
index e4c597a0..81769114 100644
--- a/packages/router/src/routes/modules/demo/editor.ts
+++ b/packages/router/src/routes/modules/demo/editor.ts
@@ -20,6 +20,14 @@ const Editor: RouteRecordItem = {
         title: 'monaco-editor',
       },
     },
+    {
+      path: 'rich-text-editor',
+      name: 'rich-text-editor',
+      component: () => import('@/pages/demo/editor/rich-text-editor.vue'),
+      meta: {
+        title: '富文本编辑器',
+      },
+    },
   ],
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 975dd6c3..464afa28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,9 @@ importers:
       '@iconify/iconify':
         specifier: ^3.1.1
         version: 3.1.1
+      '@tinymce/tinymce-vue':
+        specifier: ^5.1.1
+        version: 5.1.1(vue@3.3.6)
       '@vben/components':
         specifier: workspace:*
         version: link:../../packages/components
@@ -400,6 +403,9 @@ importers:
       '@amap/amap-jsapi-loader':
         specifier: ^1.0.1
         version: 1.0.1
+      '@tinymce/tinymce-vue':
+        specifier: ^5.1.1
+        version: 5.1.1(vue@3.3.6)
       '@vben/hooks':
         specifier: workspace:*
         version: link:../hooks
@@ -4047,6 +4053,15 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /@tinymce/tinymce-vue@5.1.1(vue@3.3.6):
+    resolution: {integrity: sha512-iO57HOWesFOhsaqjA5Ea6sDvQBmJJH3/dq00Uvg7metlct2kLF+ctRgoDsetLt6gmeZ7COPftr814/XzqnJ/dg==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      tinymce: 6.8.0
+      vue: 3.3.6(typescript@5.2.2)
+    dev: false
+
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -12671,6 +12686,10 @@ packages:
     resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
     dev: true
 
+  /tinymce@6.8.0:
+    resolution: {integrity: sha512-WSQlyfW8aPkOVMmmHmSVeA5Dq4JuUZjTB+PmePJ27oQ+ruv3Zn4KSTsvSnDUrHlqygjDvRidrCB/m5nTWCC2nA==}
+    dev: false
+
   /tinypool@0.7.0:
     resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
     engines: {node: '>=14.0.0'}