From e3b17f0f04be572f89e0a8d1f824e3c9d12f5997 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Fri, 25 Oct 2024 10:46:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix=20:=20=E4=BF=AE=E5=A4=8Dtinymce?=
=?UTF-8?q?=E7=9A=84=E5=A4=9A=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=92=8C?=
=?UTF-8?q?=E9=99=84=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/axupimgs/plugin.js | 76 ++++++++++
src/assets/axupimgs/plugin.min.js | 75 ++++++++++
src/assets/axupimgs/upfiles.html | 203 +++++++++++++++++++++++++++
src/components/Tinymce.vue | 91 +++++++++---
src/views/article-management/add.vue | 2 +-
5 files changed, 427 insertions(+), 20 deletions(-)
create mode 100644 src/assets/axupimgs/plugin.js
create mode 100644 src/assets/axupimgs/plugin.min.js
create mode 100644 src/assets/axupimgs/upfiles.html
diff --git a/src/assets/axupimgs/plugin.js b/src/assets/axupimgs/plugin.js
new file mode 100644
index 0000000..3acbbb7
--- /dev/null
+++ b/src/assets/axupimgs/plugin.js
@@ -0,0 +1,76 @@
+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 = '/src/assets/axupimgs/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');
+ 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';
+ }
+ }
+ editor.insertContent(html);
+ axupimgs.res=[];
+ api.close();
+ break;
+ default:
+ break;
+ }
+
+ }
+ });
+ };
+
+ editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('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",
+ };
+ }
+ };
+});
diff --git a/src/assets/axupimgs/plugin.min.js b/src/assets/axupimgs/plugin.min.js
new file mode 100644
index 0000000..db7a3cc
--- /dev/null
+++ b/src/assets/axupimgs/plugin.min.js
@@ -0,0 +1,75 @@
+tinymce.PluginManager.add('axupimgs', function(editor, url) {
+ var pluginName='Ax多图片上传';
+ window.axupimgs={}; //扔外部公共变量，也可以扔一个自定义的位置
+
+ var baseURL=tinymce.baseURL;
+ var iframe1 = baseURL+'/plugins/axupimgs/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');
+ 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';
+ }
+ }
+ editor.insertContent(html);
+ axupimgs.res=[];
+ api.close();
+ break;
+ default:
+ break;
+ }
+
+ }
+ });
+ };
+
+ editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('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",
+ };
+ }
+ };
+});
diff --git a/src/assets/axupimgs/upfiles.html b/src/assets/axupimgs/upfiles.html
new file mode 100644
index 0000000..7f8f62c
--- /dev/null
+++ b/src/assets/axupimgs/upfiles.html
@@ -0,0 +1,203 @@
+
+
+
+
+axupimgs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue
index 85efecf..96dac0e 100644
--- a/src/components/Tinymce.vue
+++ b/src/components/Tinymce.vue
@@ -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) => {
})
}
-
-