feat:引入tinymce富文本编辑器使用

README.md

@@ -22,7 +22,7 @@ V3 Admin Vite is a well-crafted backend management system template, built with p
 > Version 4.x will no longer be maintained unless there are critical bugs! [Click to switch to the 4.x branch](https://github.com/un-pany/v3-admin-vite/tree/4.x)
 
 > [!TIP]
-> Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/v3-admin-vite/issues/225)
+> Paid services are officially launched! If you don't want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/v3-admin-vite/issues/225)
 
 > [!NOTE]
 > If you have mobile web app requirements, give the new open-source template [MobVue](https://github.com/un-pany/mobvue) a try.
@@ -222,3 +222,84 @@ A big thank you to all the contributors!
 ## License
 
 [MIT](./LICENSE) License © 2022-PRESENT [pany](https://github.com/pany-ang)
+
+## 简介
+
+一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术.
+
+## 特性
+
+- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
+- **Element Plus**：Element UI 的 Vue3 版本
+- **Pinia**: 传说中的 Vuex5
+- **Vite**：真的很快
+- **Vue Router**：路由路由
+- **TypeScript**：JavaScript 语言的超集
+- **PNPM**：更快速的，节省磁盘空间的包管理工具
+- **Scss**：和 Element Plus 保持一致
+- **CSS 变量**：主要控制项目的布局和颜色
+- **ESlint**：代码校验
+- **Prettier**：代码格式化
+- **Axios**：发送网络请求（已封装好）
+- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
+- **注释**：各个配置项都写有尽可能详细的注释
+- **兼容移动端**: 布局兼容移动端页面分辨率
+
+## 功能
+
+- **用户管理**：登录、登出演示
+- **权限管理**：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
+- **多环境**：开发环境（development）、预发布环境（staging）、正式环境（production）
+- **多主题**：内置普通、黑暗、深蓝三种主题模式
+- **错误页面**: 403、404
+- **Dashboard**：根据不同用户显示不同的 Dashboard 页面
+- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）
+
+## 📝 配置
+
+### TinyMCE 富文本编辑器
+
+本项目集成了 TinyMCE 富文本编辑器，使用前需要：
+
+1. 前往 [TinyMCE 官网](https://www.tiny.cloud/) 注册账号并获取 API Key
+2. 在项目根目录创建 `.env.development` 文件（如果不存在），添加以下配置：
+
+```bash
+# TinyMCE API Key
+VITE_TINYMCE_API_KEY='qakh29dtwy4honhyvvcu3xi4l1zw3l0w7f55z8fcru52nidw'
+```
+
+将 `your-api-key` 替换为你的实际 API Key。
+
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://github.com/un-pany/v3-admin-vite.git
+```
+
+- 安装依赖
+
+```bash
+cd v3-admin-vite
+
+pnpm install
+
+```
+
+- 运行
+
+```bash
+pnpm dev
+```
+
+- 打包
+
+```bash
+pnpm build:prod
+```
+
+## 更新日志
+
+[CHANGELOG](./CHANGELOG.md)

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@tinymce/tinymce-vue": "^5.1.1",
     "axios": "1.10.0",
     "dayjs": "1.11.13",
     "element-plus": "2.10.2",
@@ -28,6 +29,7 @@
     "path-to-regexp": "8.2.0",
     "pinia": "3.0.3",
     "screenfull": "6.0.2",
+    "tinymce": "^6.8.3",
     "vue": "3.5.17",
     "vue-router": "4.5.1",
     "vxe-table": "4.6.25"

src/common/components/Editor/index.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import Editor from "@tinymce/tinymce-vue"
+import { ref } from "vue"
+
+interface Props {
+  /** 编辑器内容 */
+  modelValue?: string
+  /** 编辑器高度 */
+  height?: number | string
+  /** 是否只读 */
+  readonly?: boolean
+  /** 占位文本 */
+  placeholder?: string
+}
+
+interface Emits {
+  (e: "update:modelValue", value: string): void
+  (e: "change", value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  height: 400,
+  readonly: false,
+  placeholder: "请输入内容"
+})
+
+const emit = defineEmits<Emits>()
+
+const editorRef = ref()
+
+// TinyMCE 配置
+const init = {
+  language: "zh_CN",
+  menubar: "file edit view insert format tools table help",
+  plugins: [
+    "advlist",
+    "autolink",
+    "lists",
+    "link",
+    "image",
+    "charmap",
+    "preview",
+    "anchor",
+    "searchreplace",
+    "visualblocks",
+    "code",
+    "fullscreen",
+    "insertdatetime",
+    "media",
+    "table",
+    "code",
+    "help",
+    "wordcount"
+  ],
+  toolbar: "undo redo | blocks | "
+    + "bold italic forecolor | alignleft aligncenter "
+    + "alignright alignjustify | bullist numlist outdent indent | "
+    + "removeformat | help",
+  content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
+  readonly: props.readonly,
+  placeholder: props.placeholder,
+  branding: false, // 去除 TinyMCE 品牌标识
+  promotion: false // 去除推广信息
+}
+
+// 内容变化时触发
+function handleChange(value: string) {
+  emit("update:modelValue", value)
+  emit("change", value)
+}
+
+// 获取编辑器实例
+function getEditor() {
+  return editorRef.value?.editor
+}
+
+defineExpose({
+  getEditor
+})
+</script>
+
+<template>
+  <div class="v3-editor">
+    <Editor
+      ref="editorRef"
+      api-key="qakh29dtwy4honhyvvcu3xi4l1zw3l0w7f55z8fcru52nidw"
+      :init="init"
+      :model-value="modelValue"
+      :disabled="readonly"
+      :height="height"
+      @update:model-value="handleChange"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.v3-editor {
+  :deep(.tox-tinymce) {
+    border-radius: 4px;
+    border-color: var(--el-border-color);
+  }
+}
+</style>

src/pages/demo/editor-demo/index.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+import Editor from "@/common/components/Editor/index.vue"
+
+const content = ref("<p>Hello V3 Admin Vite!</p>")
+
+function handleChange(value: string) {
+  console.log("content changed:", value)
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <el-card header="富文本编辑器示例">
+      <Editor v-model="content" @change="handleChange" />
+      <div class="preview-container">
+        <h3>HTML 预览:</h3>
+        <div v-html="content" class="preview-content" />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.preview-container {
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+
+  h3 {
+    margin: 0 0 10px;
+    font-size: 16px;
+    color: var(--el-text-color-primary);
+  }
+
+  .preview-content {
+    padding: 15px;
+    background-color: var(--el-bg-color-page);
+    border-radius: 4px;
+
+    :deep(img) {
+      max-width: 100%;
+    }
+  }
+}
+</style>

src/router/index.ts

@@ -99,6 +99,15 @@ export const constantRoutes: RouteRecordRaw[] = [
           keepAlive: true
         }
       },
+      {
+        path: "editor",
+        component: () => import("@/pages/demo/editor-demo/index.vue"),
+        name: "Editor",
+        meta: {
+          title: "富文本编辑器",
+          keepAlive: true
+        }
+      },
       {
         path: "level2",
         component: () => import("@/pages/demo/level2/index.vue"),