From b8d6b038dbca2ddf54102976f1796c3e169f442c Mon Sep 17 00:00:00 2001
From: zhangzheng <zzvaki@gmail.com>
Date: Tue, 10 Jan 2023 17:55:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E3=80=81=E8=A7=86=E9=A2=91=EF=BC=88=E4=BB=85?=
 =?UTF-8?q?mp4=EF=BC=8C=E5=85=B6=E4=BB=96=E6=A0=BC=E5=BC=8F=E8=87=AA?=
 =?UTF-8?q?=E8=A1=8C=E6=B7=BB=E5=8A=A0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |   1 +
 src/api/system/upload.js        |  10 +++
 src/components/Editor/index.vue | 151 ++++++++++++++++++++++++++++++++
 src/main.js                     |   3 +
 4 files changed, 165 insertions(+)
 create mode 100644 src/api/system/upload.js
 create mode 100644 src/components/Editor/index.vue

diff --git a/package.json b/package.json
index fc1939f79..8234b3367 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@tinymce/tinymce-vue": "^5.0.0",
     "@element-plus/icons-vue": "2.0.10",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
diff --git a/src/api/system/upload.js b/src/api/system/upload.js
new file mode 100644
index 000000000..dd826294c
--- /dev/null
+++ b/src/api/system/upload.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+export function uploadImage(data, onUploadProgress = () => {}) {
+  return request({
+    url: '/common/upload',
+    method: 'post',
+    data: data,
+    onUploadProgress,
+  });
+}
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
new file mode 100644
index 000000000..1ed087fae
--- /dev/null
+++ b/src/components/Editor/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <Editor ref="$Editor" :api-key='apiKey' :init="initSettings" v-model="state.content" />
+    <Teleport to=".tox-dialog__header" v-if="showProgress">
+      <div class="upload-progress" :style="`width: ${progressPercent}%;background: ${progressColor};`"></div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import Editor from '@tinymce/tinymce-vue'
+import { uploadImage } from "@/api/system/upload.js"
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  minHeight:{
+    type: Number,
+    default: 240,
+  }
+})
+
+const showProgress = ref(false)
+const progressPercent = ref(0)
+const progressColor = ref('#409eff')
+
+const state = reactive({
+  // content: '<b>hello vue3-tinymce!<b>',
+});
+
+const $Editor = ref(null)
+const apiKey = '' // 填入自己的apiKey
+const initSettings = {
+  language: 'zh_CN',
+  branding: false,
+  // toolbar: false, //隐藏工具栏
+  // menubar: false, //隐藏菜单栏
+  // inline: true, //开启内联模式
+  plugins: 'advlist autolink link image media anchor lists preview', //字符串方式
+  // toolbar:'media',
+  toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media file',
+  height: props.minHeight, // editor 高度
+  width: '100%', // editor 宽度
+  // 图片上传
+  images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
+    const formData = new FormData();
+    formData.append('file', blobInfo.blob(), blobInfo.filename());
+    const onUploadProgress = (progressEvent) => {
+      // console.log('onUploadProgress', progressEvent)
+      if (progressEvent.lengthComputable) {
+        var complete =
+          (((progressEvent.loaded / progressEvent.total) * 100) | 0);
+        console.log('complete', complete)
+        console.log('progress', progress)
+        progress(complete)
+      }
+    }
+    uploadImage(formData, onUploadProgress).then(res => {
+      console.log('uploadImage', res)
+      resolve(res.url);
+    }).catch(err => {
+      reject(err.msg)
+    })
+  }),
+  // 文件上传
+  file_picker_types: 'media',
+  file_picker_callback: (callback, value, meta) => {
+    if (meta.filetype == 'media') {
+      const input = document.createElement('input') //创建一个隐藏的input
+      input.setAttribute('type', 'file')
+      input.onchange = function () {
+        const file = this.files[0] //选取第一个文件
+        // console.log('file', file)
+        if (file.type === "video/mp4") {
+          // 进度条重置
+          progressPercent.value = 0
+          progressColor.value = '#409eff'
+          showProgress.value = true
+          const formData = new FormData();
+          formData.append('file', file, file.name);
+          const onUploadProgress = (progressEvent) => {
+            // console.log('onUploadProgress', progressEvent)
+            if (progressEvent.lengthComputable) {
+              var complete =
+                (((progressEvent.loaded / progressEvent.total) * 100) | 0);
+              progressPercent.value = complete
+            }
+          }
+          uploadImage(formData, onUploadProgress).then(res => {
+            // console.log('uploadImage', res)
+            callback(res.url);
+            progressColor.value = '#67c23a'
+          }).catch(err => {
+            progressColor.value = '#f56c6c'
+            callback(err.msg)
+          }).finally(() => {
+            setTimeout(() => {
+              showProgress.value = false
+            }, 2000);
+          })
+        } else {
+          // window.tinymce.activeEditor.notificationManager.open({
+          //   text: '仅支持mp4文件上传，请重新选择',
+          //   type: 'warning'
+          // });
+          callback('仅支持mp4文件上传，请重新选择。')
+          // ElMessage({
+          //   message: '仅支持mp4文件上传，请重新选择。',
+          //   type: 'warning',
+          // })
+        }
+      }
+      //触发点击
+      input.click()
+    }
+  },
+}
+watch(() => props.modelValue, val => {
+  if (val !== state.content) {
+    state.content = val === null ? "" : val;
+  }
+}, { immediate: true });
+const emit = defineEmits()
+watch(() => state.content, val => {
+  emit('update:modelValue', val)
+});
+</script>
+
+
+<style  lang="scss" scoped>
+.upload-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  // bottom: 0;
+  background: #1c6ca1;
+  width: 10%;
+  min-width: 20px;
+  height: 2px;
+  transition: all 0.15s ease-in-out;
+}
+</style>
+<style  lang="scss">
+.tox-tinymce-aux {
+  // z-index: 3000 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 28725e7bd..5c5ffc417 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,8 @@ import ImagePreview from "@/components/ImagePreview"
 import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+// 富文本组件
+import Editor from "@/components/Editor";
 
 const app = createApp(App)
 
@@ -62,6 +64,7 @@ app.component('FileUpload', FileUpload)
 app.component('ImageUpload', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
+app.component("Editor", Editor);
 
 app.use(router)
 app.use(store)