odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 修复tinymce的多图片上传和附件上传

Browse Source
This commit is contained in:
odjbin
2024-10-25 10:46:35 +08:00
parent a01cede9c0
commit e3b17f0f04
5 changed files with 427 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/Tinymce.vue
View File

@@ -8,7 +8,7 @@
import tinymce from 'tinymce'
import Editor from "@tinymce/tinymce-vue";
import {defineProps} from "vue";
import {ElMessage} from "element-plus";
import {ElMessage, ElNotification} from "element-plus";
import {getToken} from '@/utils/auth'
import axios from "axios";
@@ -36,6 +36,7 @@ import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/autosave'
import '@/assets/axupimgs/plugin.js'//多图上传插件
const emit = defineEmits(['update:value'])
const props = defineProps({
@@ -55,7 +56,8 @@ const props = defineProps({
plugins: {
type: [String, Array],
default:
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
//
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image axupimgs link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
},
toolbar: {
type: [String, Array],
@@ -93,16 +95,16 @@ const init = reactive({
resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
promotion: false,
branding: false, //tiny技术支持信息是否显示
// statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
// elementpath: false, //元素路径是否显示
statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
elementpath: false, //元素路径是否显示
font_formats: props.fontFormats, //字体样式
plugins: props.plugins, //插件配置 axupimgs indent2em
toolbar: props.toolbar, //工具栏配置，设为false则隐藏
// menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
// images_upload_url: '/apib/api-upload/uploadimg', //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
menubar: "file edit view format table tools", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
images_upload_url: '/workflow/process/file/upload', //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
// images_upload_base_path: '/demo', //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
paste_data_images: true, //图片是否可粘贴
file_picker_types: "file image media", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
file_picker_types: "file image", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
// 文件上传处理函数
setup: function (editor) {
editor.on('change', function (e) {
@@ -119,7 +121,7 @@ const init = reactive({
// }),
},
file_picker_callback: (callback, value, meta) => {
// console.log('callback, value, meta',callback, value, meta)
console.log('callback, value, meta',callback, value, meta)
// 使用案例http://tinymce.ax-z.cn/general/upload-images.php
// meta.filetype //根据这个判断点击的是什么file image media
let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
@@ -137,16 +139,48 @@ const init = reactive({
inputElem.click();
inputElem.onchange = () => {
let file = inputElem.files[0]; //获取文件信息
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
let id = "blobid" + new Date().getTime();
let blobCache = tinymce.activeEditor.editorUpload.blobCache;
let base64 = reader.result.split(",")[1];
let blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
callback(blobInfo.blobUri(), {alt: file.name});
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', import.meta.env.VITE_BASE_URL+props.imageUrl);
xhr.setRequestHeader(
'Authorization',getToken()
)
xhr.onload = function() {
let res;
// if (xhr.status != 200) {
// failure('HTTP Error: ' + xhr.status);
// return;
// }
res = JSON.parse(xhr.responseText);
console.log(res);
ElNotification({
title: '提示',
message: res.code === 1000 ? '上传成功' : '上传失败',
type: res.code === 1000 ? 'success' : 'error'
})
const fileUrl = res.data.url;
callback(fileUrl, { title: file.name });
};
formData = new FormData();
formData.append('file', file, file.name );
xhr.send(formData);
//
// let reader = new FileReader();
// reader.readAsDataURL(file);
// reader.onload = function () {
// let formData;
// let id = "blobid" + new Date().getTime();
// let blobCache = tinymce.activeEditor.editorUpload.blobCache;
// let base64 = reader.result.split(",")[1];
// let blobInfo = blobCache.create(id, file, base64);
// blobCache.add(blobInfo);
// // callback(blobInfo.blobUri(), {alt: file.name});
// formData = new FormData();
// formData.append('file', file, file.name );
// uploadFile(formData, props.imageUrl,callback)
// };
};
},
});
@@ -177,12 +211,31 @@ const uploadFile = (formData, url,success) => {
})
}
</script>
<style scoped>
<style scoped lang="scss">
.tox-sidebar-wrap{
&::-webkit-scrollbar {
width: 6px;
}
// 滚动条轨道
&::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
// 小滑块
&::-webkit-scrollbar-thumb {
background: rgba(80, 81, 82, 0.29);
border-radius: 10px;
}
}
.tinymce-boxz > textarea {
display: none;
}
</style>
<style>
<style lang="scss">
/* 隐藏apikey没有绑定当前域名的提示 */
.tox-notifications-container .tox-notification--warning {
display: none !important;