fix: 修改多图片上传页面
This commit is contained in:
@@ -1,76 +1,77 @@
|
||||
tinymce.PluginManager.add('axupimgs', function(editor, url) {
|
||||
var pluginName='多图片上传';
|
||||
window.axupimgs={}; //扔外部公共变量，也可以扔一个自定义的位置
|
||||
const baseURL = import.meta.env.VITE_BASE_URL
|
||||
tinymce.PluginManager.add('axupimgs', function (editor, url) {
|
||||
var pluginName = '多图片上传';
|
||||
window.axupimgs = {}; //扔外部公共变量，也可以扔一个自定义的位置
|
||||
const baseURL = import.meta.env.VITE_BASE_URL
|
||||
|
||||
// var baseURL=tinymce.baseURL;
|
||||
var iframe1 = '/upfiles.html';
|
||||
axupimgs.images_upload_handler = editor.getParam('images_upload_handler', undefined, 'function');
|
||||
axupimgs.images_upload_base_path = editor.getParam('images_upload_base_path', '','string');
|
||||
// var baseURL=tinymce.baseURL;
|
||||
var iframe1 = '/upfiles.html';
|
||||
console.log('editor',editor)
|
||||
axupimgs.images_upload_handler = editor.getParam('images_upload_handler_not_loading', undefined, 'function');
|
||||
axupimgs.images_upload_base_path = editor.getParam('images_upload_base_path', '', 'string');
|
||||
axupimgs.axupimgs_filetype = editor.getParam('axupimgs_filetype', '.png,.gif,.jpg,.jpeg', 'string');
|
||||
axupimgs.res=[];
|
||||
var openDialog = function() {
|
||||
return editor.windowManager.openUrl({
|
||||
title: pluginName,
|
||||
size: 'large',
|
||||
url:iframe1,
|
||||
buttons: [
|
||||
{
|
||||
type: 'cancel',
|
||||
text: 'Close'
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
text: 'Save',
|
||||
name: 'save',
|
||||
primary: true
|
||||
},
|
||||
],
|
||||
onAction: function (api, details) {
|
||||
switch (details.name) {
|
||||
case 'save':
|
||||
var html = '';
|
||||
var imgs = axupimgs.res;
|
||||
var len = imgs.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if( imgs[i].url ){
|
||||
html += '<img src="'+imgs[i].url+'" />';
|
||||
}
|
||||
}
|
||||
editor.insertContent(html);
|
||||
axupimgs.res=[];
|
||||
api.close();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
axupimgs.res = [];
|
||||
var openDialog = function () {
|
||||
return editor.windowManager.openUrl({
|
||||
title: pluginName,
|
||||
size: 'large',
|
||||
url: iframe1,
|
||||
buttons: [
|
||||
{
|
||||
type: 'cancel',
|
||||
text: 'Close'
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
text: 'Save',
|
||||
name: 'save',
|
||||
primary: true
|
||||
},
|
||||
],
|
||||
onAction: function (api, details) {
|
||||
switch (details.name) {
|
||||
case 'save':
|
||||
var html = '';
|
||||
var imgs = axupimgs.res;
|
||||
var len = imgs.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (imgs[i].url) {
|
||||
html += '<img src="' + imgs[i].url + '" />';
|
||||
}
|
||||
}
|
||||
editor.insertContent(html);
|
||||
axupimgs.res = [];
|
||||
api.close();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('axupimgs','<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>');
|
||||
editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('axupimgs', '<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>');
|
||||
|
||||
editor.ui.registry.addButton('axupimgs', {
|
||||
icon: 'axupimgs',
|
||||
editor.ui.registry.addButton('axupimgs', {
|
||||
icon: 'axupimgs',
|
||||
tooltip: pluginName,
|
||||
onAction: function() {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
editor.ui.registry.addMenuItem('axupimgs', {
|
||||
icon: 'axupimgs',
|
||||
text: '图片批量上传...',
|
||||
onAction: function() {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
return {
|
||||
getMetadata: function() {
|
||||
return {
|
||||
name: pluginName,
|
||||
url: "http://tinymce.ax-z.cn/more-plugins/axupimgs.php",
|
||||
};
|
||||
}
|
||||
};
|
||||
onAction: function () {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
editor.ui.registry.addMenuItem('axupimgs', {
|
||||
icon: 'axupimgs',
|
||||
text: '图片批量上传...',
|
||||
onAction: function () {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
return {
|
||||
getMetadata: function () {
|
||||
return {
|
||||
name: pluginName,
|
||||
url: "http://tinymce.ax-z.cn/more-plugins/axupimgs.php",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@@ -70,11 +70,11 @@ const props = defineProps({
|
||||
type: [String, Array],
|
||||
default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;"
|
||||
},
|
||||
width:{
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
height:{
|
||||
height: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
@@ -90,7 +90,7 @@ const init = reactive({
|
||||
placeholder: "在这里输入文字", //textarea中的提示信息
|
||||
min_width: 300,
|
||||
min_height: 200,
|
||||
width:props.width,
|
||||
width: props.width,
|
||||
height: props.height, //注：引入autoresize插件时，此属性失效
|
||||
resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
|
||||
promotion: false,
|
||||
@@ -117,9 +117,15 @@ const init = reactive({
|
||||
let formData = new FormData()
|
||||
formData.append('file', blobInfo.blob())
|
||||
//上传图片接口 上传成功后返回图片地址，用于显示在富文本中
|
||||
uploadFile(formData, props.imageUrl, success)
|
||||
uploadFile(formData, props.imageUrl, success, true)
|
||||
// }),
|
||||
},
|
||||
images_upload_handler_not_loading: (blobInfo, success) => {
|
||||
let formData = new FormData()
|
||||
formData.append('file', blobInfo.blob())
|
||||
//上传图片接口
|
||||
uploadFile(formData, props.imageUrl, success, false)
|
||||
},
|
||||
file_picker_callback: (callback, value, meta) => {
|
||||
// 使用案例http://tinymce.ax-z.cn/general/upload-images.php
|
||||
// meta.filetype //根据这个判断点击的是什么file image media
|
||||
@@ -141,34 +147,34 @@ const init = reactive({
|
||||
let xhr, formData;
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.withCredentials = false;
|
||||
xhr.open('POST', import.meta.env.VITE_BASE_URL+props.imageUrl);
|
||||
xhr.open('POST', import.meta.env.VITE_BASE_URL + props.imageUrl);
|
||||
xhr.setRequestHeader(
|
||||
'Authorization',getToken()
|
||||
'Authorization', getToken()
|
||||
)
|
||||
let loading= ElLoading.service({
|
||||
let loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '文件上传中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
xhr.onload = function() {
|
||||
xhr.onload = function () {
|
||||
let res;
|
||||
// if (xhr.status != 200) {
|
||||
// failure('HTTP Error: ' + xhr.status);
|
||||
// return;
|
||||
// }
|
||||
res = JSON.parse(xhr.responseText);
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.code === 1000 ? '上传成功' : '上传失败',
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.code === 1000 ? '上传成功' : '上传失败',
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
loading.close()
|
||||
const fileUrl = res.data.url;
|
||||
// '?fileId='+res.data.id+
|
||||
callback(fileUrl+'?fileName='+res.data.originalFilename, {text:file.name ,title: file.name });
|
||||
callback(fileUrl + '?fileName=' + res.data.originalFilename, {text: file.name, title: file.name});
|
||||
};
|
||||
formData = new FormData();
|
||||
formData.append('file', file, file.name );
|
||||
formData.append('file', file, file.name);
|
||||
xhr.send(formData);
|
||||
//
|
||||
// let reader = new FileReader();
|
||||
@@ -192,12 +198,16 @@ const init = reactive({
|
||||
watch(() => {
|
||||
emit("update:value", content.value);
|
||||
});
|
||||
const uploadFile = (formData, url,success) => {
|
||||
let loading= ElLoading.service({
|
||||
lock: true,
|
||||
text: '图片上传中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
const uploadFile = (formData, url, success, isLoading) => {
|
||||
let loading = null
|
||||
if (isLoading) {
|
||||
loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '图片上传中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
}
|
||||
|
||||
axios.post(
|
||||
import.meta.env.VITE_BASE_URL + url,
|
||||
formData,
|
||||
@@ -214,16 +224,24 @@ const uploadFile = (formData, url,success) => {
|
||||
let data = res.data
|
||||
if (data.code !== 1000) {
|
||||
ElMessage.error(data.msg)
|
||||
loading.close()
|
||||
}else {
|
||||
success(data.data.url)
|
||||
loading.close()
|
||||
if (loading) {
|
||||
loading.close()
|
||||
}
|
||||
} else {
|
||||
if (isLoading) {
|
||||
success(data.data.url)
|
||||
} else {
|
||||
success(data.data.url, data.data.originalFilename)
|
||||
}
|
||||
if (loading) {
|
||||
loading.close()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tox-sidebar-wrap{
|
||||
.tox-sidebar-wrap {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
@@ -240,13 +258,14 @@ const uploadFile = (formData, url,success) => {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tinymce-boxz > textarea {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
<style lang="scss">
|
||||
/* 隐藏apikey没有绑定当前域名的提示 */
|
||||
.tox-notifications-container .tox-notification--warning {
|
||||
display: none !important;
|
||||
|
||||
Reference in New Issue
Block a user