chore: delete uppercase
This commit is contained in:
dap
parent
54425f8a61
commit
0a18c0f86d
@ -1,5 +0,0 @@
|
|||||||
import { withInstall } from '#/utils';
|
|
||||||
|
|
||||||
import dictTag from './src/index.vue';
|
|
||||||
|
|
||||||
export const DictTag = withInstall(dictTag);
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import { type VNode } from 'vue';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
interface TagType {
|
|
||||||
[key: string]: { color: string; label: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const tagTypes: TagType = {
|
|
||||||
cyan: { color: 'cyan', label: 'cyan' },
|
|
||||||
danger: { color: 'error', label: '危险(danger)' },
|
|
||||||
/** 由于和elementUI不同 用于替换颜色 */
|
|
||||||
default: { color: 'default', label: '默认(default)' },
|
|
||||||
green: { color: 'green', label: 'green' },
|
|
||||||
info: { color: 'default', label: '信息(info)' },
|
|
||||||
orange: { color: 'orange', label: 'orange' },
|
|
||||||
/** 自定义预设 color可以为16进制颜色 */
|
|
||||||
pink: { color: 'pink', label: 'pink' },
|
|
||||||
primary: { color: 'processing', label: '主要(primary)' },
|
|
||||||
purple: { color: 'purple', label: 'purple' },
|
|
||||||
red: { color: 'red', label: 'red' },
|
|
||||||
success: { color: 'success', label: '成功(success)' },
|
|
||||||
warning: { color: 'warning', label: '警告(warning)' },
|
|
||||||
};
|
|
||||||
|
|
||||||
// 字典选择使用 { label: string; value: string }[]
|
|
||||||
interface Options {
|
|
||||||
label: string | VNode;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function tagSelectOptions() {
|
|
||||||
const selectArray: Options[] = [];
|
|
||||||
Object.keys(tagTypes).forEach((key) => {
|
|
||||||
if (!tagTypes[key]) return;
|
|
||||||
const label = tagTypes[key].label;
|
|
||||||
const color = tagTypes[key].color;
|
|
||||||
selectArray.push({
|
|
||||||
label: <Tag color={color}>{label}</Tag>,
|
|
||||||
value: key,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return selectArray;
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { DictData } from '#/api/system/dict/dict-data-model';
|
|
||||||
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { tagTypes } from './data';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
dicts: DictData[]; // dict数组
|
|
||||||
value: number | string; // value
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
dicts: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
const color = computed<string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
const listClass = current?.listClass ?? '';
|
|
||||||
// 是否为默认的颜色
|
|
||||||
const isDefault = Reflect.has(tagTypes, listClass);
|
|
||||||
// 判断是默认还是自定义颜色
|
|
||||||
if (isDefault) {
|
|
||||||
// 这里做了antd - element-plus的兼容
|
|
||||||
return tagTypes[listClass]!.color;
|
|
||||||
}
|
|
||||||
return listClass;
|
|
||||||
});
|
|
||||||
|
|
||||||
const cssClass = computed<string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
return current?.cssClass ?? '';
|
|
||||||
});
|
|
||||||
|
|
||||||
const label = computed<number | string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
return current?.dictLabel ?? 'unknown';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Tag v-if="color" :class="cssClass" :color="color">{{ label }}</Tag>
|
|
||||||
<div v-if="!color" :class="cssClass">{{ label }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { withInstall } from '#/utils';
|
|
||||||
|
|
||||||
import tinymce from './src/editor.vue';
|
|
||||||
|
|
||||||
export const Tinymce = withInstall(tinymce);
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
const validEvents = new Set([
|
|
||||||
'onActivate',
|
|
||||||
'onAddUndo',
|
|
||||||
'onBeforeAddUndo',
|
|
||||||
'onBeforeExecCommand',
|
|
||||||
'onBeforeGetContent',
|
|
||||||
'onBeforeRenderUI',
|
|
||||||
'onBeforeSetContent',
|
|
||||||
'onBeforePaste',
|
|
||||||
'onBlur',
|
|
||||||
'onChange',
|
|
||||||
'onClearUndos',
|
|
||||||
'onClick',
|
|
||||||
'onContextMenu',
|
|
||||||
'onCopy',
|
|
||||||
'onCut',
|
|
||||||
'onDblclick',
|
|
||||||
'onDeactivate',
|
|
||||||
'onDirty',
|
|
||||||
'onDrag',
|
|
||||||
'onDragDrop',
|
|
||||||
'onDragEnd',
|
|
||||||
'onDragGesture',
|
|
||||||
'onDragOver',
|
|
||||||
'onDrop',
|
|
||||||
'onExecCommand',
|
|
||||||
'onFocus',
|
|
||||||
'onFocusIn',
|
|
||||||
'onFocusOut',
|
|
||||||
'onGetContent',
|
|
||||||
'onHide',
|
|
||||||
'onInit',
|
|
||||||
'onKeyDown',
|
|
||||||
'onKeyPress',
|
|
||||||
'onKeyUp',
|
|
||||||
'onLoadContent',
|
|
||||||
'onMouseDown',
|
|
||||||
'onMouseEnter',
|
|
||||||
'onMouseLeave',
|
|
||||||
'onMouseMove',
|
|
||||||
'onMouseOut',
|
|
||||||
'onMouseOver',
|
|
||||||
'onMouseUp',
|
|
||||||
'onNodeChange',
|
|
||||||
'onObjectResizeStart',
|
|
||||||
'onObjectResized',
|
|
||||||
'onObjectSelected',
|
|
||||||
'onPaste',
|
|
||||||
'onPostProcess',
|
|
||||||
'onPostRender',
|
|
||||||
'onPreProcess',
|
|
||||||
'onProgressState',
|
|
||||||
'onRedo',
|
|
||||||
'onRemove',
|
|
||||||
'onReset',
|
|
||||||
'onSaveContent',
|
|
||||||
'onSelectionChange',
|
|
||||||
'onSetAttrib',
|
|
||||||
'onSetContent',
|
|
||||||
'onShow',
|
|
||||||
'onSubmit',
|
|
||||||
'onUndo',
|
|
||||||
'onVisualAid',
|
|
||||||
]);
|
|
||||||
|
|
||||||
const isValidKey = (key: string) => validEvents.has(key);
|
|
||||||
|
|
||||||
export const bindHandlers = (
|
|
||||||
initEvent: Event,
|
|
||||||
listeners: any,
|
|
||||||
editor: any,
|
|
||||||
): void => {
|
|
||||||
Object.keys(listeners)
|
|
||||||
.filter((element) => isValidKey(element))
|
|
||||||
.forEach((key: string) => {
|
|
||||||
const handler = listeners[key];
|
|
||||||
if (typeof handler === 'function') {
|
|
||||||
if (key === 'onInit') {
|
|
||||||
handler(initEvent, editor);
|
|
||||||
} else {
|
|
||||||
editor.on(key.slice(2), (e: any) => handler(e, editor));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { useAppConfig } from '@vben/hooks';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import { message, Upload } from 'ant-design-vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'TinymceImageUpload' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
disabled: {
|
|
||||||
default: false,
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
fullscreen: {
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['uploading', 'done', 'error']);
|
|
||||||
|
|
||||||
let uploading = false;
|
|
||||||
|
|
||||||
const { apiURL, clientId } = useAppConfig(
|
|
||||||
import.meta.env,
|
|
||||||
import.meta.env.PROD,
|
|
||||||
);
|
|
||||||
const accessStore = useAccessStore();
|
|
||||||
const uploadUrl = `${apiURL}/resource/oss/upload`;
|
|
||||||
// 使用upload组件只能这样上传
|
|
||||||
const headers = {
|
|
||||||
Authorization: `Bearer ${accessStore.accessToken}`,
|
|
||||||
clientId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const getButtonProps = computed(() => {
|
|
||||||
const { disabled } = props;
|
|
||||||
return {
|
|
||||||
disabled,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleChange(info: Record<string, any>) {
|
|
||||||
const file = info.file;
|
|
||||||
const status = file?.status;
|
|
||||||
// const url = file?.response?.data.url;
|
|
||||||
const name = file?.name;
|
|
||||||
|
|
||||||
switch (status) {
|
|
||||||
case 'uploading': {
|
|
||||||
if (!uploading) {
|
|
||||||
emit('uploading', name);
|
|
||||||
uploading = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'done': {
|
|
||||||
// http 200会走到这里 需要再次判断
|
|
||||||
const { response } = file;
|
|
||||||
const { code, data, msg = '服务器错误' } = response;
|
|
||||||
if (code === 200) {
|
|
||||||
const { url } = data;
|
|
||||||
emit('done', name, url);
|
|
||||||
} else {
|
|
||||||
message.error(msg);
|
|
||||||
}
|
|
||||||
// emit('done', name, url);
|
|
||||||
uploading = false;
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'error': {
|
|
||||||
emit('error');
|
|
||||||
uploading = false;
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// No default
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div :class="[{ fullscreen }]" class="tinymce-image-upload">
|
|
||||||
<Upload
|
|
||||||
:action="uploadUrl"
|
|
||||||
:headers="headers"
|
|
||||||
:show-upload-list="false"
|
|
||||||
accept=".jpg,.jpeg,.gif,.png,.webp"
|
|
||||||
multiple
|
|
||||||
name="file"
|
|
||||||
@change="handleChange"
|
|
||||||
>
|
|
||||||
<!-- 这里要改成i18n -->
|
|
||||||
<a-button type="primary" v-bind="{ ...getButtonProps }">
|
|
||||||
图片上传
|
|
||||||
</a-button>
|
|
||||||
</Upload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.tinymce-image-upload {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&.fullscreen {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
// Any plugins you want to setting has to be imported
|
|
||||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
|
||||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
|
||||||
// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
|
|
||||||
|
|
||||||
// quickbars 快捷栏
|
|
||||||
export const plugins =
|
|
||||||
'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
|
|
||||||
|
|
||||||
export const toolbar =
|
|
||||||
'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { withInstall } from '#/utils';
|
|
||||||
|
|
||||||
import dictTag from './src/index.vue';
|
|
||||||
|
|
||||||
export const DictTag = withInstall(dictTag);
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import { type VNode } from 'vue';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
interface TagType {
|
|
||||||
[key: string]: { color: string; label: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const tagTypes: TagType = {
|
|
||||||
cyan: { color: 'cyan', label: 'cyan' },
|
|
||||||
danger: { color: 'error', label: '危险(danger)' },
|
|
||||||
/** 由于和elementUI不同 用于替换颜色 */
|
|
||||||
default: { color: 'default', label: '默认(default)' },
|
|
||||||
green: { color: 'green', label: 'green' },
|
|
||||||
info: { color: 'default', label: '信息(info)' },
|
|
||||||
orange: { color: 'orange', label: 'orange' },
|
|
||||||
/** 自定义预设 color可以为16进制颜色 */
|
|
||||||
pink: { color: 'pink', label: 'pink' },
|
|
||||||
primary: { color: 'processing', label: '主要(primary)' },
|
|
||||||
purple: { color: 'purple', label: 'purple' },
|
|
||||||
red: { color: 'red', label: 'red' },
|
|
||||||
success: { color: 'success', label: '成功(success)' },
|
|
||||||
warning: { color: 'warning', label: '警告(warning)' },
|
|
||||||
};
|
|
||||||
|
|
||||||
// 字典选择使用 { label: string; value: string }[]
|
|
||||||
interface Options {
|
|
||||||
label: string | VNode;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function tagSelectOptions() {
|
|
||||||
const selectArray: Options[] = [];
|
|
||||||
Object.keys(tagTypes).forEach((key) => {
|
|
||||||
if (!tagTypes[key]) return;
|
|
||||||
const label = tagTypes[key].label;
|
|
||||||
const color = tagTypes[key].color;
|
|
||||||
selectArray.push({
|
|
||||||
label: <Tag color={color}>{label}</Tag>,
|
|
||||||
value: key,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return selectArray;
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { DictData } from '#/api/system/dict/dict-data-model';
|
|
||||||
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { tagTypes } from './data';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
dicts: DictData[]; // dict数组
|
|
||||||
value: number | string; // value
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
dicts: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
const color = computed<string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
const listClass = current?.listClass ?? '';
|
|
||||||
// 是否为默认的颜色
|
|
||||||
const isDefault = Reflect.has(tagTypes, listClass);
|
|
||||||
// 判断是默认还是自定义颜色
|
|
||||||
if (isDefault) {
|
|
||||||
// 这里做了antd - element-plus的兼容
|
|
||||||
return tagTypes[listClass]!.color;
|
|
||||||
}
|
|
||||||
return listClass;
|
|
||||||
});
|
|
||||||
|
|
||||||
const cssClass = computed<string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
return current?.cssClass ?? '';
|
|
||||||
});
|
|
||||||
|
|
||||||
const label = computed<number | string>(() => {
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
const current = props.dicts.find((item) => item.dictValue == props.value);
|
|
||||||
return current?.dictLabel ?? 'unknown';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Tag v-if="color" :class="cssClass" :color="color">{{ label }}</Tag>
|
|
||||||
<div v-if="!color" :class="cssClass">{{ label }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { withInstall } from '#/utils';
|
|
||||||
|
|
||||||
import tinymce from './src/editor.vue';
|
|
||||||
|
|
||||||
export const Tinymce = withInstall(tinymce);
|
|
||||||
@ -1,370 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
|
|
||||||
import type { Editor as EditorType } from 'tinymce/tinymce';
|
|
||||||
|
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
nextTick,
|
|
||||||
onActivated,
|
|
||||||
onBeforeUnmount,
|
|
||||||
onDeactivated,
|
|
||||||
onMounted,
|
|
||||||
type PropType,
|
|
||||||
ref,
|
|
||||||
unref,
|
|
||||||
useAttrs,
|
|
||||||
watch,
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
import { preferences, usePreferences } from '@vben/preferences';
|
|
||||||
|
|
||||||
import Editor from '@tinymce/tinymce-vue';
|
|
||||||
import { isNumber } from 'lodash-es';
|
|
||||||
|
|
||||||
import { uploadApi, type UploadResult } from '#/api/core/upload';
|
|
||||||
import { buildShortUUID } from '#/utils/uuid';
|
|
||||||
|
|
||||||
import { bindHandlers } from './helper';
|
|
||||||
import ImgUpload from './img-upload.vue';
|
|
||||||
import {
|
|
||||||
plugins as defaultPlugins,
|
|
||||||
toolbar as defaultToolbar,
|
|
||||||
} from './tinymce';
|
|
||||||
|
|
||||||
defineOptions({ inheritAttrs: false });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
height: {
|
|
||||||
default: 400,
|
|
||||||
required: false,
|
|
||||||
type: [Number, String] as PropType<number | string>,
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
default: () => ({}),
|
|
||||||
// eslint-disable-next-line no-use-before-define
|
|
||||||
type: Object as PropType<Partial<InitOptions>>,
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: {
|
|
||||||
default: defaultPlugins,
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
showImageUpload: {
|
|
||||||
default: true,
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
default: defaultToolbar,
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
default: 'auto',
|
|
||||||
required: false,
|
|
||||||
type: [Number, String] as PropType<number | string>,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['change']);
|
|
||||||
|
|
||||||
type InitOptions = IPropTypes['init'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 外部使用 v-model 绑定值
|
|
||||||
*/
|
|
||||||
const modelValue = defineModel('modelValue', { default: '', type: String });
|
|
||||||
/**
|
|
||||||
* https://www.jianshu.com/p/59a9c3802443
|
|
||||||
* 使用自托管方案（本地）代替cdn 没有key的限制
|
|
||||||
* 注意publicPath要以/结尾
|
|
||||||
*/
|
|
||||||
const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
|
|
||||||
|
|
||||||
const attrs = useAttrs();
|
|
||||||
const editorRef = ref<EditorType>();
|
|
||||||
const fullscreen = ref(false);
|
|
||||||
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
|
|
||||||
const elRef = ref<HTMLElement | null>(null);
|
|
||||||
|
|
||||||
const containerWidth = computed(() => {
|
|
||||||
const width = props.width;
|
|
||||||
if (isNumber(width)) {
|
|
||||||
return `${width}px`;
|
|
||||||
}
|
|
||||||
return width;
|
|
||||||
});
|
|
||||||
|
|
||||||
const { isDark } = usePreferences();
|
|
||||||
const skinName = computed(() => {
|
|
||||||
return isDark.value ? 'oxide-dark' : 'oxide';
|
|
||||||
});
|
|
||||||
|
|
||||||
const contentCss = computed(() => {
|
|
||||||
return isDark.value ? 'dark' : 'default';
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 通过v-if来挂载/卸载组件
|
|
||||||
* 来完成主题切换/语言切换
|
|
||||||
*/
|
|
||||||
const init = ref(true);
|
|
||||||
watch(
|
|
||||||
() => [preferences.theme.mode, preferences.app.locale],
|
|
||||||
() => {
|
|
||||||
if (!editorRef.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
destroy();
|
|
||||||
init.value = false;
|
|
||||||
// 放在下一次tick来切换
|
|
||||||
// 需要先加载组件 也就是v-if为true 然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
|
|
||||||
nextTick(() => {
|
|
||||||
init.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
setEditorMode();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* tinymce支持 en zh_CN
|
|
||||||
*/
|
|
||||||
const langName = computed(() => {
|
|
||||||
const lang = preferences.app.locale.replace('-', '_');
|
|
||||||
if (lang.includes('en_US')) {
|
|
||||||
return 'en';
|
|
||||||
}
|
|
||||||
return 'zh_CN';
|
|
||||||
});
|
|
||||||
|
|
||||||
const initOptions = computed((): InitOptions => {
|
|
||||||
const { height, options, plugins, toolbar } = props;
|
|
||||||
return {
|
|
||||||
auto_focus: true,
|
|
||||||
branding: false, // 显示右下角的'使用 TinyMCE 构建'
|
|
||||||
content_css: contentCss.value,
|
|
||||||
content_style:
|
|
||||||
'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
|
|
||||||
contextmenu: 'link image table',
|
|
||||||
default_link_target: '_blank',
|
|
||||||
height,
|
|
||||||
image_advtab: true, // 图片高级选项
|
|
||||||
image_caption: true,
|
|
||||||
importcss_append: true,
|
|
||||||
language: langName.value,
|
|
||||||
license_key: 'gpl',
|
|
||||||
link_title: false,
|
|
||||||
menubar: 'file edit view insert format tools table help',
|
|
||||||
noneditable_class: 'mceNonEditable',
|
|
||||||
/**
|
|
||||||
* 允许粘贴图片 默认base64格式
|
|
||||||
* images_upload_handler启用时为上传
|
|
||||||
*/
|
|
||||||
paste_data_images: true,
|
|
||||||
plugins,
|
|
||||||
quickbars_selection_toolbar:
|
|
||||||
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
|
|
||||||
skin: skinName.value,
|
|
||||||
toolbar,
|
|
||||||
toolbar_mode: 'sliding',
|
|
||||||
...options,
|
|
||||||
/**
|
|
||||||
* 覆盖默认的base64行为
|
|
||||||
* @param blobInfo
|
|
||||||
* 大坑 不要调用这两个函数 success failure:
|
|
||||||
* 使用resolve/reject代替
|
|
||||||
*/
|
|
||||||
images_upload_handler: (blobInfo) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const file = blobInfo.blob();
|
|
||||||
// const filename = blobInfo.filename();
|
|
||||||
uploadApi(file)
|
|
||||||
.then((response) => {
|
|
||||||
const { url } = response as unknown as UploadResult;
|
|
||||||
console.log('tinymce上传图片:', url);
|
|
||||||
resolve(url);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error('tinymce上传图片失败:', error);
|
|
||||||
reject(error.message);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setup: (editor) => {
|
|
||||||
editorRef.value = editor;
|
|
||||||
editor.on('init', (e) => initSetup(e));
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 监听options.readonly
|
|
||||||
*/
|
|
||||||
watch(
|
|
||||||
() => props.options,
|
|
||||||
(options) => {
|
|
||||||
const getDisabled = options && Reflect.get(options, 'readonly');
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
if (editor) {
|
|
||||||
editor.mode.set(getDisabled ? 'readonly' : 'design');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (!initOptions.value.inline) {
|
|
||||||
tinymceId.value = buildShortUUID('tiny-vue');
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
initEditor();
|
|
||||||
setEditorMode();
|
|
||||||
}, 30);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
onDeactivated(() => {
|
|
||||||
destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
onActivated(() => {
|
|
||||||
setEditorMode();
|
|
||||||
});
|
|
||||||
|
|
||||||
function setEditorMode() {
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
if (editor) {
|
|
||||||
const mode = props.options.readonly ? 'readonly' : 'design';
|
|
||||||
editor.mode.set(mode);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function destroy() {
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
editor?.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
function initEditor() {
|
|
||||||
const el = unref(elRef);
|
|
||||||
if (el) {
|
|
||||||
el.style.visibility = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initSetup(e: any) {
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
if (!editor) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const value = modelValue.value || '';
|
|
||||||
|
|
||||||
editor.setContent(value);
|
|
||||||
bindModelHandlers(editor);
|
|
||||||
bindHandlers(e, attrs, unref(editorRef));
|
|
||||||
}
|
|
||||||
|
|
||||||
function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
|
|
||||||
if (
|
|
||||||
editor &&
|
|
||||||
typeof val === 'string' &&
|
|
||||||
val !== prevVal &&
|
|
||||||
val !== editor.getContent({ format: attrs.outputFormat })
|
|
||||||
) {
|
|
||||||
editor.setContent(val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function bindModelHandlers(editor: any) {
|
|
||||||
const modelEvents = attrs.modelEvents ?? null;
|
|
||||||
const normalizedEvents = Array.isArray(modelEvents)
|
|
||||||
? modelEvents.join(' ')
|
|
||||||
: modelEvents;
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => modelValue.value,
|
|
||||||
(val, prevVal) => {
|
|
||||||
setValue(editor, val, prevVal);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
editor.on(normalizedEvents || 'change keyup undo redo', () => {
|
|
||||||
const content = editor.getContent({ format: attrs.outputFormat });
|
|
||||||
emit('change', content);
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('FullscreenStateChanged', (e: any) => {
|
|
||||||
fullscreen.value = e.state;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const disabled = computed(() => props.options.readonly ?? false);
|
|
||||||
|
|
||||||
function getUploadingImgName(name: string) {
|
|
||||||
return `[uploading:${name}]`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleImageUploading(name: string) {
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
if (!editor) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
|
|
||||||
const content = editor?.getContent() ?? '';
|
|
||||||
setValue(editor, content);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDone(name: string, url: string) {
|
|
||||||
const editor = unref(editorRef);
|
|
||||||
if (!editor) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const content = editor?.getContent() ?? '';
|
|
||||||
const val =
|
|
||||||
content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
|
|
||||||
setValue(editor, val);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div :style="{ width: containerWidth }" class="app-tinymce">
|
|
||||||
<ImgUpload
|
|
||||||
v-if="showImageUpload"
|
|
||||||
v-show="editorRef"
|
|
||||||
:disabled="disabled"
|
|
||||||
:fullscreen="fullscreen"
|
|
||||||
@done="handleDone"
|
|
||||||
@uploading="handleImageUploading"
|
|
||||||
/>
|
|
||||||
<Editor
|
|
||||||
v-if="!initOptions.inline && init"
|
|
||||||
v-model="modelValue"
|
|
||||||
:init="initOptions"
|
|
||||||
:style="{ visibility: 'hidden' }"
|
|
||||||
:tinymce-script-src="tinymceScriptSrc"
|
|
||||||
/>
|
|
||||||
<slot v-else></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/**
|
|
||||||
隐藏右上角upgrade按钮
|
|
||||||
*/
|
|
||||||
:deep(.tox-promotion) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tinymce {
|
|
||||||
position: relative;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
:deep(.textarea) {
|
|
||||||
z-index: -1;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
const validEvents = new Set([
|
|
||||||
'onActivate',
|
|
||||||
'onAddUndo',
|
|
||||||
'onBeforeAddUndo',
|
|
||||||
'onBeforeExecCommand',
|
|
||||||
'onBeforeGetContent',
|
|
||||||
'onBeforeRenderUI',
|
|
||||||
'onBeforeSetContent',
|
|
||||||
'onBeforePaste',
|
|
||||||
'onBlur',
|
|
||||||
'onChange',
|
|
||||||
'onClearUndos',
|
|
||||||
'onClick',
|
|
||||||
'onContextMenu',
|
|
||||||
'onCopy',
|
|
||||||
'onCut',
|
|
||||||
'onDblclick',
|
|
||||||
'onDeactivate',
|
|
||||||
'onDirty',
|
|
||||||
'onDrag',
|
|
||||||
'onDragDrop',
|
|
||||||
'onDragEnd',
|
|
||||||
'onDragGesture',
|
|
||||||
'onDragOver',
|
|
||||||
'onDrop',
|
|
||||||
'onExecCommand',
|
|
||||||
'onFocus',
|
|
||||||
'onFocusIn',
|
|
||||||
'onFocusOut',
|
|
||||||
'onGetContent',
|
|
||||||
'onHide',
|
|
||||||
'onInit',
|
|
||||||
'onKeyDown',
|
|
||||||
'onKeyPress',
|
|
||||||
'onKeyUp',
|
|
||||||
'onLoadContent',
|
|
||||||
'onMouseDown',
|
|
||||||
'onMouseEnter',
|
|
||||||
'onMouseLeave',
|
|
||||||
'onMouseMove',
|
|
||||||
'onMouseOut',
|
|
||||||
'onMouseOver',
|
|
||||||
'onMouseUp',
|
|
||||||
'onNodeChange',
|
|
||||||
'onObjectResizeStart',
|
|
||||||
'onObjectResized',
|
|
||||||
'onObjectSelected',
|
|
||||||
'onPaste',
|
|
||||||
'onPostProcess',
|
|
||||||
'onPostRender',
|
|
||||||
'onPreProcess',
|
|
||||||
'onProgressState',
|
|
||||||
'onRedo',
|
|
||||||
'onRemove',
|
|
||||||
'onReset',
|
|
||||||
'onSaveContent',
|
|
||||||
'onSelectionChange',
|
|
||||||
'onSetAttrib',
|
|
||||||
'onSetContent',
|
|
||||||
'onShow',
|
|
||||||
'onSubmit',
|
|
||||||
'onUndo',
|
|
||||||
'onVisualAid',
|
|
||||||
]);
|
|
||||||
|
|
||||||
const isValidKey = (key: string) => validEvents.has(key);
|
|
||||||
|
|
||||||
export const bindHandlers = (
|
|
||||||
initEvent: Event,
|
|
||||||
listeners: any,
|
|
||||||
editor: any,
|
|
||||||
): void => {
|
|
||||||
Object.keys(listeners)
|
|
||||||
.filter((element) => isValidKey(element))
|
|
||||||
.forEach((key: string) => {
|
|
||||||
const handler = listeners[key];
|
|
||||||
if (typeof handler === 'function') {
|
|
||||||
if (key === 'onInit') {
|
|
||||||
handler(initEvent, editor);
|
|
||||||
} else {
|
|
||||||
editor.on(key.slice(2), (e: any) => handler(e, editor));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { useAppConfig } from '@vben/hooks';
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import { message, Upload } from 'ant-design-vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'TinymceImageUpload' });
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
disabled: {
|
|
||||||
default: false,
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
fullscreen: {
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['uploading', 'done', 'error']);
|
|
||||||
|
|
||||||
let uploading = false;
|
|
||||||
|
|
||||||
const { apiURL, clientId } = useAppConfig(
|
|
||||||
import.meta.env,
|
|
||||||
import.meta.env.PROD,
|
|
||||||
);
|
|
||||||
const accessStore = useAccessStore();
|
|
||||||
const uploadUrl = `${apiURL}/resource/oss/upload`;
|
|
||||||
// 使用upload组件只能这样上传
|
|
||||||
const headers = {
|
|
||||||
Authorization: `Bearer ${accessStore.accessToken}`,
|
|
||||||
clientId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const getButtonProps = computed(() => {
|
|
||||||
const { disabled } = props;
|
|
||||||
return {
|
|
||||||
disabled,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleChange(info: Record<string, any>) {
|
|
||||||
const file = info.file;
|
|
||||||
const status = file?.status;
|
|
||||||
// const url = file?.response?.data.url;
|
|
||||||
const name = file?.name;
|
|
||||||
|
|
||||||
switch (status) {
|
|
||||||
case 'uploading': {
|
|
||||||
if (!uploading) {
|
|
||||||
emit('uploading', name);
|
|
||||||
uploading = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'done': {
|
|
||||||
// http 200会走到这里 需要再次判断
|
|
||||||
const { response } = file;
|
|
||||||
const { code, data, msg = '服务器错误' } = response;
|
|
||||||
if (code === 200) {
|
|
||||||
const { url } = data;
|
|
||||||
emit('done', name, url);
|
|
||||||
} else {
|
|
||||||
message.error(msg);
|
|
||||||
}
|
|
||||||
// emit('done', name, url);
|
|
||||||
uploading = false;
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'error': {
|
|
||||||
emit('error');
|
|
||||||
uploading = false;
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// No default
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div :class="[{ fullscreen }]" class="tinymce-image-upload">
|
|
||||||
<Upload
|
|
||||||
:action="uploadUrl"
|
|
||||||
:headers="headers"
|
|
||||||
:show-upload-list="false"
|
|
||||||
accept=".jpg,.jpeg,.gif,.png,.webp"
|
|
||||||
multiple
|
|
||||||
name="file"
|
|
||||||
@change="handleChange"
|
|
||||||
>
|
|
||||||
<!-- 这里要改成i18n -->
|
|
||||||
<a-button type="primary" v-bind="{ ...getButtonProps }">
|
|
||||||
图片上传
|
|
||||||
</a-button>
|
|
||||||
</Upload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.tinymce-image-upload {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&.fullscreen {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
// Any plugins you want to setting has to be imported
|
|
||||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
|
||||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
|
||||||
// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
|
|
||||||
|
|
||||||
// quickbars 快捷栏
|
|
||||||
export const plugins =
|
|
||||||
'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
|
|
||||||
|
|
||||||
export const toolbar =
|
|
||||||
'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';
|
|
||||||
Loading…
Reference in New Issue
Block a user