增加富文本组件，支持上传图片、视频（仅mp4，其他格式自行添加）

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",

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,
+ });
+}

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>

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)