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