From 366b48188db3272335a1e6a7ab246b4d7a3ae526 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Sun, 24 Aug 2025 15:54:02 +0800
Subject: [PATCH] feat: downgrade tinymce and fix editor config

---
 nuxt.config.ts                 |   2 +-
 package.json                   |   4 +-
 pages/channel/create/index.vue | 727 +++++++++++++++++----------------
 plugins/tinymce.ts             |   0
 yarn.lock                      |  18 +-
 5 files changed, 379 insertions(+), 372 deletions(-)
 create mode 100644 plugins/tinymce.ts

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 00042ac..0f5531c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -115,7 +115,7 @@ export default defineNuxtConfig({
   },
 
   build: {
-    transpile: ["vueuc", "@css-render/vue3-ssr","@unocss"],
+    transpile: ["vueuc", "@css-render/vue3-ssr","@unocss","@tinymce/tinymce-vue","tinymce"],
   },
   plugins: [
     // 在这里引入插件
diff --git a/package.json b/package.json
index f71bc97..1db5b25 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
     "@pinia/nuxt": "^0.11.2",
-    "@tinymce/tinymce-vue": "^6.3.0",
+    "@tinymce/tinymce-vue": "^5.0.0",
     "@types/tinymce": "^5.5.0",
     "decimal.js": "^10.6.0",
     "echarts": "^6.0.0",
@@ -20,7 +20,7 @@
     "nuxt": "^3.18.1",
     "pdfjs-dist": "^5.4.54",
     "pinia": "^3.0.3",
-    "tinymce": "^8.0.2",
+    "tinymce": "^6.2.0",
     "vue": "^3.5.18",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^4.5.1",
diff --git a/pages/channel/create/index.vue b/pages/channel/create/index.vue
index 192490e..bbef2ed 100644
--- a/pages/channel/create/index.vue
+++ b/pages/channel/create/index.vue
@@ -1,375 +1,380 @@
 <template>
-    <KlNavTab></KlNavTab>
-    <div class="mx-auto w-[1440px]">
-      <!-- 使用 el-form 重构表单区域 -->
-      <el-form ref="formRef" inline :model="formData" label-width="110px" class="custom-form mb-[20px] mt-[20px] border rounded p-[20px]!">
-        <el-form-item label="标题：" prop="postsTitle" :rules="{ required: true, message: '请输入标题', trigger: 'blur' }">
-          <el-input v-model="formData.postsTitle" placeholder="请输入标题" class="w-[300px]!" minlength="4" maxlength="40"></el-input>
-        </el-form-item>
-        <el-form-item label="分类：" class="mb-[10px]" prop="projectDicId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
-          <el-select v-model="formData.projectDicId" placeholder="请选择分类" class="w-[300px]!">
-            <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </el-form-item>
-  
-        <el-form-item label="标签：" class="mb-[10px]" prop="postsTags" :rules="{ required: true, message: '请输入标签', trigger: ['blur', 'change'] }">
-          <el-select
-            v-model="formData.postsTags"
-            :remote-method="remoteMethod"
-            :loading="loading"
-            filterable
-            remote
-            multiple
-            placeholder="请输入搜索标签"
-            class="w-[300px]!"
-          >
-            <el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="频道列表：" class="mb-[10px]" prop="channelId" :rules="{ required: true, message: '请选择频道', trigger: ['blur', 'change'] }">
-          <el-select v-model="formData.channelId" placeholder="请选择频道" class="w-[300px]!">
-            <el-option v-for="item in channelIdList" :key="item.channelId" :label="item.channelTitle" :value="item.channelId" />
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="上传封面：" prop="postsCover" :rules="{ required: true, message: '请上传封面', trigger: ['blur', 'change'] }">
-          <KlUploader v-model:file-list="formData.postsCover" :limit="1" :size="1" tips="上传图片支持jpg/gif/png格式"> </KlUploader>
-        </el-form-item> -->
-      </el-form>
-  
-      <Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
-      <!-- 按钮区域 -->
-      <div class="mt-[20px] flex justify-end">
-        <el-button :loading="post_loading" class="mr-[10px]" @click="previewContent">预览</el-button>
-        <el-button :loading="post_loading" type="primary" @click="saveContent">发表</el-button>
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-    import { keywords } from '~/api/upnew/index'
-    import { reactive, ref, onMounted } from 'vue'
-    import { useRouter, useRoute } from 'vue-router'
-    const router = useRouter()
-    const route = useRoute()
-    import { create, list } from '~/api/channel/index'
-    import { parent,parentV2 } from '~/api/upnew/index'
-    import { upload } from '~/api/common/index' // 自定义上传方法
-    import Editor from '@tinymce/tinymce-vue'
-    import tinymce from 'tinymce/tinymce'
-    import 'tinymce/themes/silver'
-    import 'tinymce/themes/silver/theme'
-    import 'tinymce/models/dom'
-    import 'tinymce/icons/default'
-    import 'tinymce/icons/default/icons'
-    // 引入编辑器插件
-    import 'tinymce/plugins/code' //编辑源码
-    import 'tinymce/plugins/image' //插入编辑图片
-    import 'tinymce/plugins/media' //插入视频
-    import 'tinymce/plugins/link' //超链接
-    import 'tinymce/plugins/preview' //预览
-    // import 'tinymce/plugins/template' //模板
-    import 'tinymce/plugins/table' //表格
-    import 'tinymce/plugins/pagebreak' //分页
-    import 'tinymce/plugins/lists' //列
-    import 'tinymce/plugins/advlist' //列
-    import 'tinymce/plugins/quickbars' //快速工具条
-    import 'tinymce/plugins/wordcount' // 字数统计插件
-    // import '~/assets/tinymce/langs/zh-Hans.js' //下载后的语言包
-    // import 'tinymce/skins/content/default/content.css'
-    // 获取从其他地方传过来的参数
-    const channelId = route.query.channelId as string
-  
-    const props = defineProps({
-      value: {
-        type: String,
-        default: '',
-      },
-      placeholder: {
-        type: String,
-        default: '请输入帖子内容',
-      },
-      height: {
-        type: Number,
-        default: 500,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      plugins: {
-        type: [String, Array],
-        default: 'code image link preview table quickbars pagebreak lists advlist',
-      },
-      toolbar: {
-        type: [String, Array],
-        default:
-          'undo redo codesample bold italic underline strikethrough link alignleft aligncenter alignright alignjustify \
-        bullist numlist outdent indent removeformat forecolor backcolor |formatselect fontselect fontsizeselect | \
-        blocks fontfamily fontsize pagebreak lists image customvideoupload table preview | code selectall',
-      },
-      templates: {
-        type: Array,
-        default: () => [],
-      },
-      options: {
-        type: Object,
-        default: () => ({}),
-      },
-    })
-    //用于接收外部传递进来的富文本
-    const myValue = ref(props.value)
-    const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
-    const init = reactive({
-      selector: '#' + tinymceId.value, //富文本编辑器的id,
-      language_url: '~/staic/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
-      language: 'zh-Hans', //语言
-      skin_url: '~/staic/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
-      content_css: '~/staic/tinymce/skins/content/default/content.css',
-      menubar: true, //顶部菜单栏显示
-      statusbar: true, // 底部的状态栏
-      plugins: props.plugins,
-      toolbar: props.toolbar,
-      toolbar_mode: 'sliding',
-      font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
-      paste_convert_word_fake_lists: false, // 插入word文档需要该属性
-      font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px', //文字大小
-      height: props.height, //编辑器高度
-      placeholder: props.placeholder,
-      branding: false, //是否禁用"Powered by TinyMCE"
-      promotion: false, //禁用升级按钮
-      image_dimensions: false, //去除宽高属性
-      paste_webkit_styles: 'all',
-      paste_merge_formats: true,
-      nonbreaking_force_tab: false,
-      paste_auto_cleanup_on_paste: false,
-      file_picker_types: 'file',
-      resize: true,
-      elementpath: true,
-      content_style: `img {max-width:100%;} body{background-color: #fff;}`, // 直接自定义可编辑区域的css样式
-      templates: props.templates,
-      quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
-      quickbars_image_toolbar: 'alignleft aligncenter alignright',
-      quickbars_insert_toolbar: false,
-      image_caption: true,
-      image_advtab: true,
-      convert_urls: false,
-      images_upload_url: import.meta.env.VITE_BASE_API,
-      images_upload_handler: function (blobInfo: any, progress: any) {
-        console.log(blobInfo, progress)
-        return new Promise((resolve, reject) => {
-          const data = new FormData()
-          data.append('file', blobInfo.blob())
-          data.append('fieldName', blobInfo.filename())
-          upload('/prod-api/app-api/infra/file/upload', data)
-            .then((res) => {
-              resolve(res.data)
-            })
-            .catch(() => {
-              reject('Image upload failed')
-            })
-        })
-      },
-  
-      // 添加自定义按钮
-      setup: function (editor: any) {
-        if (process.client) {
-            // 注册一个新的视频上传按钮
-            editor.ui.registry.addButton('customvideoupload', {
-              icon: 'embed', // 使用嵌入媒体图标
-              tooltip: '上传视频',
-              onAction: function () {
-                // 创建文件输入元素
-                const input = document.createElement('input')
-                input.setAttribute('type', 'file')
-                input.setAttribute('accept', 'video/*')
-      
-                // 处理文件选择事件
-                input.onchange = function () {
-                  if (input.files && input.files[0]) {
-                    const file = input.files[0]
-                    const data = new FormData()
-                    data.append('file', file)
-                    data.append('fieldName', file.name)
-      
-                    // 可以在这里添加上传进度显示
-      
-                    upload('/prod-api/app-api/infra/file/upload', data)
-                      .then((res) => {
-                        // 插入视频到编辑器
-                        editor.insertContent(`
-                        <video controls width="400">
-                          <source src="${res.data}" type="video/${file.name.split('.').pop()}">
-                          您的浏览器不支持视频标签
-                        </video>
-                      `)
-                      })
-                      .catch((error) => {
-                        console.error('视频上传失败:', error)
-                        // 可以添加错误提示
-                      })
-                  }
-                }
-      
-                // 触发文件选择
-                input.click()
-              },
-            })
+  <KlNavTab></KlNavTab>
+  <div class="mx-auto w-[1440px]">
+    <!-- 使用 el-form 重构表单区域 -->
+    <el-form ref="formRef" inline :model="formData" label-width="110px" class="custom-form mb-[20px] mt-[20px] border rounded p-[20px]!">
+      <el-form-item label="标题：" prop="postsTitle" :rules="{ required: true, message: '请输入标题', trigger: 'blur' }">
+        <el-input v-model="formData.postsTitle" placeholder="请输入标题" class="w-[300px]!" minlength="4" maxlength="40"></el-input>
+      </el-form-item>
+      <el-form-item label="分类：" class="mb-[10px]" prop="projectDicId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
+        <el-select v-model="formData.projectDicId" placeholder="请选择分类" class="w-[300px]!">
+          <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
 
-        }
-      },
-  
-      preview_styles: true,
-      ...props.options,
-    })
-  
-    // 表单数据
-    const formData = ref({
-      projectDicId: undefined,
-      postsTags: [],
-      postsCover: [] as any,
-      postsTitle: '',
-      channelId: channelId || undefined,
-    })
-  
-    const formRef = ref()
-    const post_loading = ref(false)
-    const saveContent = () => {
-      formRef.value.validate().then(() => {
-        if (!myValue.value) {
-          ElMessage.error('请输入帖子内容')
-          return
-        }
-        post_loading.value = true
-        create({
-          postsTitle: formData.value.postsTitle,
-          // postsCover: formData.value.postsCover[0].url,
-          postsTags: formData.value.postsTags.join(','),
-          postsContent: myValue.value,
-          projectDicId: formData.value.projectDicId,
-          channelId: formData.value.channelId,
-        })
+      <el-form-item label="标签：" class="mb-[10px]" prop="postsTags" :rules="{ required: true, message: '请输入标签', trigger: ['blur', 'change'] }">
+        <el-select
+          v-model="formData.postsTags"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          filterable
+          remote
+          multiple
+          placeholder="请输入搜索标签"
+          class="w-[300px]!"
+        >
+          <el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="频道列表：" class="mb-[10px]" prop="channelId" :rules="{ required: true, message: '请选择频道', trigger: ['blur', 'change'] }">
+        <el-select v-model="formData.channelId" placeholder="请选择频道" class="w-[300px]!">
+          <el-option v-for="item in channelIdList" :key="item.channelId" :label="item.channelTitle" :value="item.channelId" />
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="上传封面：" prop="postsCover" :rules="{ required: true, message: '请上传封面', trigger: ['blur', 'change'] }">
+        <KlUploader v-model:file-list="formData.postsCover" :limit="1" :size="1" tips="上传图片支持jpg/gif/png格式"> </KlUploader>
+      </el-form-item> -->
+    </el-form>
+
+    <ClientOnly>
+      <Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
+    </ClientOnly>
+    <!-- 按钮区域 -->
+    <div class="mt-[20px] flex justify-end">
+      <el-button :loading="post_loading" class="mr-[10px]" @click="previewContent">预览</el-button>
+      <el-button :loading="post_loading" type="primary" @click="saveContent">发表</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { keywords } from '~/api/upnew/index'
+  import { reactive, ref, onMounted } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+  const router = useRouter()
+  const route = useRoute()
+  import { create, list } from '~/api/channel/index'
+  import { parent,parentV2 } from '~/api/upnew/index'
+  import { upload } from '~/api/common/index' // 自定义上传方法
+  import Editor from '@tinymce/tinymce-vue'
+  import tinymce from 'tinymce/tinymce'
+  import 'tinymce/themes/silver'
+  import 'tinymce/themes/silver/theme'
+  import 'tinymce/models/dom'
+  import 'tinymce/icons/default'
+  import 'tinymce/icons/default/icons'
+  // 引入编辑器插件
+  import 'tinymce/plugins/code' //编辑源码
+  import 'tinymce/plugins/image' //插入编辑图片
+  import 'tinymce/plugins/media' //插入视频
+  import 'tinymce/plugins/link' //超链接
+  import 'tinymce/plugins/preview' //预览
+  // import 'tinymce/plugins/template' //模板
+  import 'tinymce/plugins/table' //表格
+  import 'tinymce/plugins/pagebreak' //分页
+  import 'tinymce/plugins/lists' //列
+  import 'tinymce/plugins/advlist' //列
+  import 'tinymce/plugins/quickbars' //快速工具条
+  import 'tinymce/plugins/wordcount' // 字数统计插件
+  // import 'tinymce/langs/zh-Hans'
+//   import 'tinymce/skins/ui/oxide/skin.min.css'  
+// import 'tinymce/skins/ui/oxide/content.min.css'
+// import 'tinymce/skins/content/default/content.css'
+  // import '~/assets/tinymce/langs/zh-Hans.js' //下载后的语言包
+  // import 'tinymce/skins/content/default/content.css'
+  // 获取从其他地方传过来的参数
+  const channelId = route.query.channelId as string
+
+  const props = defineProps({
+    value: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '请输入帖子内容',
+    },
+    height: {
+      type: Number,
+      default: 500,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    plugins: {
+      type: [String, Array],
+      default: 'code image link preview table quickbars pagebreak lists advlist',
+    },
+    toolbar: {
+      type: [String, Array],
+      default:
+        'undo redo codesample bold italic underline strikethrough link alignleft aligncenter alignright alignjustify \
+      bullist numlist outdent indent removeformat forecolor backcolor |formatselect fontselect fontsizeselect | \
+      blocks fontfamily fontsize pagebreak lists image customvideoupload table preview | code selectall',
+    },
+    templates: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+  })
+  //用于接收外部传递进来的富文本
+  const myValue = ref(props.value)
+  const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
+  const init = reactive({
+    selector: '#' + tinymceId.value, //富文本编辑器的id,
+    language_url: '/_nuxt/static/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
+    language: 'zh-Hans', //语言
+    skin_url: '/_nuxt/static/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
+    content_css: '/_nuxt/static/tinymce/skins/content/default/content.css',
+    menubar: true, //顶部菜单栏显示
+    statusbar: true, // 底部的状态栏
+    plugins: props.plugins,
+    toolbar: props.toolbar,
+    toolbar_mode: 'sliding',
+    font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
+    paste_convert_word_fake_lists: false, // 插入word文档需要该属性
+    font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px', //文字大小
+    height: props.height, //编辑器高度
+    placeholder: props.placeholder,
+    branding: false, //是否禁用"Powered by TinyMCE"
+    promotion: false, //禁用升级按钮
+    image_dimensions: false, //去除宽高属性
+    paste_webkit_styles: 'all',
+    paste_merge_formats: true,
+    nonbreaking_force_tab: false,
+    paste_auto_cleanup_on_paste: false,
+    file_picker_types: 'file',
+    resize: true,
+    elementpath: true,
+    content_style: `img {max-width:100%;} body{background-color: #fff;}`, // 直接自定义可编辑区域的css样式
+    templates: props.templates,
+    quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
+    quickbars_image_toolbar: 'alignleft aligncenter alignright',
+    quickbars_insert_toolbar: false,
+    image_caption: true,
+    image_advtab: true,
+    convert_urls: false,
+    images_upload_url: import.meta.env.VITE_BASE_API,
+    images_upload_handler: function (blobInfo: any, progress: any) {
+      console.log(blobInfo, progress)
+      return new Promise((resolve, reject) => {
+        const data = new FormData()
+        data.append('file', blobInfo.blob())
+        data.append('fieldName', blobInfo.filename())
+        upload('/prod-api/app-api/infra/file/upload', data)
           .then((res) => {
-            console.log(res)
-            if (res.code === 0) {
-              ElMessage.success('发表成功')
-              router.push('/communication/channel')
-            }
+            resolve(res.data)
           })
-          .catch((err) => {
-            console.log(err)
-          })
-          .finally(() => {
-            post_loading.value = false
+          .catch(() => {
+            reject('Image upload failed')
           })
       })
-    }
-    const previewContent = () => {
-      // 获取编辑器实例
-      const editor = tinymce.get(tinymceId.value)
-      // 调用编辑器的预览命令
-      if (editor) {
-        editor.execCommand('mcePreview')
+    },
+
+    // 添加自定义按钮
+    setup: function (editor: any) {
+      if (process.client) {
+          // 注册一个新的视频上传按钮
+          editor.ui.registry.addButton('customvideoupload', {
+            icon: 'embed', // 使用嵌入媒体图标
+            tooltip: '上传视频',
+            onAction: function () {
+              // 创建文件输入元素
+              const input = document.createElement('input')
+              input.setAttribute('type', 'file')
+              input.setAttribute('accept', 'video/*')
+    
+              // 处理文件选择事件
+              input.onchange = function () {
+                if (input.files && input.files[0]) {
+                  const file = input.files[0]
+                  const data = new FormData()
+                  data.append('file', file)
+                  data.append('fieldName', file.name)
+    
+                  // 可以在这里添加上传进度显示
+    
+                  upload('/prod-api/app-api/infra/file/upload', data)
+                    .then((res) => {
+                      // 插入视频到编辑器
+                      editor.insertContent(`
+                      <video controls width="400">
+                        <source src="${res.data}" type="video/${file.name.split('.').pop()}">
+                        您的浏览器不支持视频标签
+                      </video>
+                    `)
+                    })
+                    .catch((error) => {
+                      console.error('视频上传失败:', error)
+                      // 可以添加错误提示
+                    })
+                }
+              }
+    
+              // 触发文件选择
+              input.click()
+            },
+          })
+
       }
-    }
-    //在onMounted中初始化编辑器
-    onMounted(() => {
-        if (process.client) {
-            getParent()
-            getChannelIdList()
-            tinymce.init({})
-        }
-    })
-  
-    /** 获取频道列表 */
-    const channelIdList = ref<any>([])
-    const getChannelIdList = () => {
-      list().then((res) => {
-        channelIdList.value = res.data
+    },
+
+    preview_styles: true,
+    ...props.options,
+  })
+
+  // 表单数据
+  const formData = ref({
+    projectDicId: undefined,
+    postsTags: [],
+    postsCover: [] as any,
+    postsTitle: '',
+    channelId: channelId || undefined,
+  })
+
+  const formRef = ref()
+  const post_loading = ref(false)
+  const saveContent = () => {
+    formRef.value.validate().then(() => {
+      if (!myValue.value) {
+        ElMessage.error('请输入帖子内容')
+        return
+      }
+      post_loading.value = true
+      create({
+        postsTitle: formData.value.postsTitle,
+        // postsCover: formData.value.postsCover[0].url,
+        postsTags: formData.value.postsTags.join(','),
+        postsContent: myValue.value,
+        projectDicId: formData.value.projectDicId,
+        channelId: formData.value.channelId,
       })
+        .then((res) => {
+          console.log(res)
+          if (res.code === 0) {
+            ElMessage.success('发表成功')
+            router.push('/communication/channel')
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+        .finally(() => {
+          post_loading.value = false
+        })
+    })
+  }
+  const previewContent = () => {
+    // 获取编辑器实例
+    const editor = tinymce.get(tinymceId.value)
+    // 调用编辑器的预览命令
+    if (editor) {
+      editor.execCommand('mcePreview')
     }
-  
-  
-    const projectTypeList = ref<any>([])
-    /** 获取分类下拉框 */
-    const getParent = () => {
-        parentV2({
+  }
+  //在onMounted中初始化编辑器
+  onMounted(async () => {
+    if (process.client) {
+          getParent()
+          getChannelIdList()
+          tinymce.init({})
+      }
+  })
+
+  /** 获取频道列表 */
+  const channelIdList = ref<any>([])
+  const getChannelIdList = () => {
+    list().then((res) => {
+      channelIdList.value = res.data
+    })
+  }
+
+
+  const projectTypeList = ref<any>([])
+  /** 获取分类下拉框 */
+  const getParent = () => {
+      parentV2({
+      type: 1,
+      parentId: 0,
+    }).then((res) => {
+      projectTypeList.value = res.data
+    })
+  }
+
+
+  const loading = ref(false)
+  /** 获取标签 */
+  const labelsList = ref<any>([])
+  const remoteMethod = (query: string) => {
+    if (query) {
+      loading.value = true
+      keywords({
         type: 1,
-        parentId: 0,
-      }).then((res) => {
-        projectTypeList.value = res.data
+        keywords: query,
       })
-    }
-  
-  
-    const loading = ref(false)
-    /** 获取标签 */
-    const labelsList = ref<any>([])
-    const remoteMethod = (query: string) => {
-      if (query) {
-        loading.value = true
-        keywords({
-          type: 1,
-          keywords: query,
+        .then((res) => {
+          labelsList.value = res.data
         })
-          .then((res) => {
-            labelsList.value = res.data
-          })
-          .finally(() => {
-            loading.value = false
-          })
-      } else {
-        labelsList.value = []
-      }
+        .finally(() => {
+          loading.value = false
+        })
+    } else {
+      labelsList.value = []
     }
-  </script>
-  
-  <style scoped>
-    .custom-form {
-      border: 2px solid #eeeeee;
-      border-radius: 4px;
+  }
+</script>
+
+<style scoped>
+  .custom-form {
+    border: 2px solid #eeeeee;
+    border-radius: 4px;
+  }
+
+  .upload-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cover-uploader {
+    :deep(.el-upload) {
+      width: fit-content;
     }
-  
-    .upload-container {
-      display: flex;
-      flex-direction: column;
-    }
-  
-    .cover-uploader {
-      :deep(.el-upload) {
-        width: fit-content;
-      }
-    }
-  
-    .image-error {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: #909399;
-      height: 100%;
-    }
-  
-    .image-actions {
-      display: flex;
-      justify-content: center;
-    }
-  
-    :deep(.el-form-item__label) {
-      font-weight: normal;
-    }
-  
-    :deep(.el-button--primary.is-link) {
-      padding: 0;
-      height: auto;
-      font-size: 14px;
-    }
-  
-    .text-gray-500 {
-      color: #999;
-    }
-  
-    .text-12px {
-      font-size: 12px;
-    }
-  </style>
-  
\ No newline at end of file
+  }
+
+  .image-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    height: 100%;
+  }
+
+  .image-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  :deep(.el-form-item__label) {
+    font-weight: normal;
+  }
+
+  :deep(.el-button--primary.is-link) {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+  }
+
+  .text-gray-500 {
+    color: #999;
+  }
+
+  .text-12px {
+    font-size: 12px;
+  }
+</style>
\ No newline at end of file
diff --git a/plugins/tinymce.ts b/plugins/tinymce.ts
new file mode 100644
index 0000000..e69de29
diff --git a/yarn.lock b/yarn.lock
index 99f52a7..923f874 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1730,10 +1730,12 @@
   resolved "https://registry.npmmirror.com/@speed-highlight/core/-/core-1.2.7.tgz"
   integrity sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==
 
-"@tinymce/tinymce-vue@^6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-vue/-/tinymce-vue-6.3.0.tgz#1ea4d57eea71e48aa71da9d8de98472f8505b2d4"
-  integrity sha512-DSP8Jhd3XqCCliTnusfbmz3D8GqQ4iRzkc4aadYHDcJPVjkaqopJ61McOdH82CSy599vGLkPjGzqJYWJkRMiUA==
+"@tinymce/tinymce-vue@^5.0.0":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-vue/-/tinymce-vue-5.1.1.tgz#0879787e07833a4316b2eaf0417c7c6a2abce86b"
+  integrity sha512-iO57HOWesFOhsaqjA5Ea6sDvQBmJJH3/dq00Uvg7metlct2kLF+ctRgoDsetLt6gmeZ7COPftr814/XzqnJ/dg==
+  dependencies:
+    tinymce "^6.0.0 || ^5.5.1"
 
 "@tybys/wasm-util@^0.10.0":
   version "0.10.0"
@@ -6479,10 +6481,10 @@ tinymce@*:
   resolved "https://registry.npmmirror.com/tinymce/-/tinymce-8.0.2.tgz#babaaa40c154d0832b41332f25f3485b5887a6f2"
   integrity sha512-Gkvn5mRcZCAK1EKP7hnk3VBzwqPbqpZU2AN0T08BMtvmY9Sg0C0ZqmMghJCQ3vgo+LWA38pDOPiaM8EW7BZEow==
 
-tinymce@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-8.0.2.tgz#babaaa40c154d0832b41332f25f3485b5887a6f2"
-  integrity sha512-Gkvn5mRcZCAK1EKP7hnk3VBzwqPbqpZU2AN0T08BMtvmY9Sg0C0ZqmMghJCQ3vgo+LWA38pDOPiaM8EW7BZEow==
+"tinymce@^6.0.0 || ^5.5.1", tinymce@^6.2.0:
+  version "6.8.6"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.6.tgz#799e4f03eeb4399399dfdeb12ba17b3b91887adf"
+  integrity sha512-++XYEs8lKWvZxDCjrr8Baiw7KiikraZ5JkLMg6EdnUVNKJui0IsrAADj5MsyUeFkcEryfn2jd3p09H7REvewyg==
 
 tmp-promise@^3.0.2:
   version "3.0.3"