From db42d08c39ae6129e2b95cd24c0d57c6769282e5 Mon Sep 17 00:00:00 2001
From: huangyinfeng <1244041895@qq.com>
Date: 星期日, 29 九月 2024 15:32:51 +0800
Subject: [PATCH] 邮件右键菜单
---
src/components/Tinymce/src/Editor.vue | 779 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 431 insertions(+), 348 deletions(-)
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index 8341568..025753a 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -1,393 +1,476 @@
<template>
<div :class="prefixCls" :style="{ width: containerWidth }">
- <a-form-item>
- <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }" v-if="!initOptions.inline"></textarea>
+ <textarea
+ :id="tinymceId"
+ ref="elRef"
+ :style="{ visibility: 'hidden' }"
+ v-if="!initOptions.inline"
+ ></textarea>
<slot v-else></slot>
<div class="p-2 tox-statusbar">
- <a-form-item-rest class="icon-text" type="success" size="23">
- <ImgUpload :fullscreen="fullscreen" @uploading="handleImageUploading" @done="handleDone" v-if="showImageUpload"
- v-show="editorRef" :title='"闄勪欢"' :disabled="disabled" :accept='".zip,.txt,.docx,.xls,.xlsx,.pptx"' />
- </a-form-item-rest>
-
- <a-form-item-rest class="icon-text" type="success" size="23">
- <ImgUpload :fullscreen="fullscreen" @uploading="handleImageUploading" @done="handleDone" v-if="showImageUpload"
- v-show="editorRef" :title='"鍥剧墖"' :disabled="disabled" :accept='".jpg,.jpeg,.gif,.png,.webp"' />
- </a-form-item-rest>
- <a-form-item-rest class="icon-text" type="success" size="23">
- <a-button type="text" size='small'>蹇�熸枃鏈�</a-button>
- </a-form-item-rest>
+ <ImgUpload
+ ref="fileRef"
+ :fullscreen="fullscreen"
+ :fileListTemp="fileListTemp"
+ @uploading="handleImageUploading"
+ @done="handleDone"
+ @fileListChange="fileListChange"
+ v-if="isImg"
+ v-show="editorRef"
+ :title="'闄勪欢'"
+ :type="'file'"
+ :disabled="disabled"
+ />
+ <div class="my-upload-list">
+ <div style="display: flex">
+ <ImgUpload
+ :fullscreen="fullscreen"
+ @uploading="handleImageUploading"
+ @done="handleDone"
+ v-if="isImg"
+ v-show="editorRef"
+ :title="'鍥剧墖'"
+ :type="'png'"
+ :disabled="disabled"
+ :accept="'.jpg,.jpeg,.gif,.png,.webp'"
+ />
+ <a-button v-if="isText" type="text" size="small">
+ <SnippetsOutlined />
+ 蹇�熸枃鏈�</a-button
+ >
+ </div>
+ </div>
</div>
- </a-form-item>
-
</div>
</template>
<script lang="ts" setup>
-import type { Editor, RawEditorSettings } from 'tinymce';
-import tinymce from 'tinymce/tinymce';
-import 'tinymce/themes/silver';
-import 'tinymce/icons/default/icons';
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/anchor';
-import 'tinymce/plugins/autolink';
-import 'tinymce/plugins/autosave';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/codesample';
-import 'tinymce/plugins/directionality';
-import 'tinymce/plugins/fullscreen';
-import 'tinymce/plugins/hr';
-import 'tinymce/plugins/insertdatetime';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/media';
-import 'tinymce/plugins/nonbreaking';
-import 'tinymce/plugins/noneditable';
-import 'tinymce/plugins/pagebreak';
-import 'tinymce/plugins/paste';
-import 'tinymce/plugins/preview';
-import 'tinymce/plugins/print';
-import 'tinymce/plugins/save';
-import 'tinymce/plugins/searchreplace';
-import 'tinymce/plugins/spellchecker';
-import 'tinymce/plugins/tabfocus';
-// import 'tinymce/plugins/table';
-import 'tinymce/plugins/template';
-import 'tinymce/plugins/textpattern';
-import 'tinymce/plugins/visualblocks';
-import 'tinymce/plugins/visualchars';
-import 'tinymce/plugins/wordcount';
+ import type { Editor, RawEditorSettings } from 'tinymce';
+ import { PaperClipOutlined, UploadOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
+ import { useGlobSetting } from '@/hooks/setting';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/imagetools';
-import 'tinymce/plugins/help';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/emoticons/js/emojis';
-// import 'tinymce/plugins/bdmap';
-// import 'tinymce/plugins/indent2em';
-import 'tinymce/plugins/autoresize';
-// import 'tinymce/plugins/formatpainter';
-// import 'tinymce/plugins/axupimgs';
+ import tinymce from 'tinymce/tinymce';
+ import 'tinymce/themes/silver';
+ import 'tinymce/icons/default/icons';
+ import 'tinymce/plugins/advlist';
+ import 'tinymce/plugins/anchor';
+ import 'tinymce/plugins/autolink';
+ import 'tinymce/plugins/autosave';
+ import 'tinymce/plugins/code';
+ import 'tinymce/plugins/codesample';
+ import 'tinymce/plugins/directionality';
+ import 'tinymce/plugins/fullscreen';
+ import 'tinymce/plugins/hr';
+ import 'tinymce/plugins/insertdatetime';
+ import 'tinymce/plugins/link';
+ import 'tinymce/plugins/lists';
+ import 'tinymce/plugins/media';
+ import 'tinymce/plugins/nonbreaking';
+ import 'tinymce/plugins/noneditable';
+ import 'tinymce/plugins/pagebreak';
+ import 'tinymce/plugins/paste';
+ import 'tinymce/plugins/preview';
+ import 'tinymce/plugins/print';
+ import 'tinymce/plugins/save';
+ import 'tinymce/plugins/searchreplace';
+ import 'tinymce/plugins/spellchecker';
+ import 'tinymce/plugins/tabfocus';
+ // import 'tinymce/plugins/table';
+ import 'tinymce/plugins/template';
+ import 'tinymce/plugins/textpattern';
+ import 'tinymce/plugins/visualblocks';
+ import 'tinymce/plugins/visualchars';
+ import 'tinymce/plugins/wordcount';
-// import 'tinymce/plugins/powerpaste';
-// import 'tinymce/plugins/casechange';
-import 'tinymce/plugins/importcss';
-// import 'tinymce/plugins/tinyddrive';
-// import 'tinymce/plugins/advcode';
-// import 'tinymce/plugins/mediaembed';
-import 'tinymce/plugins/toc';
-// import 'tinymce/plugins/checklist';
-// import 'tinymce/plugins/tinycespellchecker';
-// import 'tinymce/plugins/a11ychecker';
-// import 'tinymce/plugins/permanentpen';
-// import 'tinymce/plugins/pageembed';
-// import 'tinymce/plugins/tinycomments';
-// import 'tinymce/plugins/mentions';
-import 'tinymce/plugins/quickbars';
-// import 'tinymce/plugins/linkchecker';
-// import 'tinymce/plugins/advtable';
-// import 'tinymce/plugins/export';
+ import 'tinymce/plugins/image';
+ import 'tinymce/plugins/table';
+ import 'tinymce/plugins/charmap';
+ import 'tinymce/plugins/imagetools';
+ import 'tinymce/plugins/help';
+ import 'tinymce/plugins/emoticons';
+ import 'tinymce/plugins/emoticons/js/emojis';
+ // import 'tinymce/plugins/bdmap';
+ // import 'tinymce/plugins/indent2em';
+ import 'tinymce/plugins/autoresize';
+ // import 'tinymce/plugins/formatpainter';
+ // import 'tinymce/plugins/axupimgs';
-import {
- computed,
- nextTick,
- ref,
- unref,
- watch,
- onDeactivated,
- onBeforeUnmount,
- PropType,
- useAttrs,
-} from 'vue';
-import ImgUpload from './ImgUpload.vue';
-import { plugins as defaultPlugins, toolbar as defaultToolbar, toolbar_groups as defaultStyleFormats } from './tinymce';
-import { buildShortUUID } from '@/utils/uuid';
-import { bindHandlers } from './helper';
-import { onMountedOrActivated } from '@vben/hooks';
-import { useDesign } from '@/hooks/web/useDesign';
-import { isNumber } from '@/utils/is';
-import { useLocale } from '@/locales/useLocale';
-import { useAppStore } from '@/store/modules/app';
+ // import 'tinymce/plugins/powerpaste';
+ // import 'tinymce/plugins/casechange';
+ import 'tinymce/plugins/importcss';
+ // import 'tinymce/plugins/tinyddrive';
+ // import 'tinymce/plugins/advcode';
+ // import 'tinymce/plugins/mediaembed';
+ import 'tinymce/plugins/toc';
+ // import 'tinymce/plugins/checklist';
+ // import 'tinymce/plugins/tinycespellchecker';
+ // import 'tinymce/plugins/a11ychecker';
+ // import 'tinymce/plugins/permanentpen';
+ // import 'tinymce/plugins/pageembed';
+ // import 'tinymce/plugins/tinycomments';
+ // import 'tinymce/plugins/mentions';
+ import 'tinymce/plugins/quickbars';
+ // import 'tinymce/plugins/linkchecker';
+ // import 'tinymce/plugins/advtable';
+ // import 'tinymce/plugins/export';
-defineOptions({ name: 'Tinymce', inheritAttrs: false });
+ import {
+ computed,
+ nextTick,
+ ref,
+ unref,
+ watch,
+ onDeactivated,
+ onBeforeUnmount,
+ PropType,
+ useAttrs,
+ } from 'vue';
+ import ImgUpload from '@/components/MyUpload/index.vue';
+ import {
+ plugins as defaultPlugins,
+ toolbar as defaultToolbar,
+ toolbar_groups as defaultStyleFormats,
+ } from './tinymce';
+ import { buildShortUUID } from '@/utils/uuid';
+ import { bindHandlers } from './helper';
+ import { onMountedOrActivated } from '@vben/hooks';
+ import { useDesign } from '@/hooks/web/useDesign';
+ import { isNumber } from '@/utils/is';
+ import { useLocale } from '@/locales/useLocale';
+ import { useAppStore } from '@/store/modules/app';
+ const { uploadUrl } = useGlobSetting();
+ // console.log(uploadUrl,'uploadUrl');
-const props = defineProps({
- options: {
- type: Object as PropType<Partial<RawEditorSettings>>,
- default: () => ({}),
- },
- value: {
- type: String,
- },
+ defineOptions({ name: 'Tinymce', inheritAttrs: false });
- toolbar: {
- type: Array as PropType<string[]>,
- default: defaultToolbar,
- },
- plugins: {
- type: Array as PropType<string[]>,
- default: defaultPlugins,
- },
- toolbar_groups: {
- type: Object as PropType<{}>,
- default: defaultStyleFormats,
- },
- modelValue: {
- type: String,
- },
- height: {
- type: [Number, String] as PropType<string | number>,
- required: false,
- default: 400,
- },
- width: {
- type: [Number, String] as PropType<string | number>,
- required: false,
- default: 'auto',
- },
- showImageUpload: {
- type: Boolean,
- default: true,
- },
- fontsize: {
- type: String
- },
-});
-
-const emit = defineEmits(['change', 'update:modelValue', 'inited', 'init-error']);
-
-const attrs = useAttrs();
-const editorRef = ref<Editor | null>(null);
-const fullscreen = ref(false);
-const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
-const elRef = ref<HTMLElement | null>(null);
-
-const { prefixCls } = useDesign('tinymce-container');
-
-const appStore = useAppStore();
-
-const containerWidth = computed(() => {
- const width = props.width;
- if (isNumber(width)) {
- return `${width}px`;
- }
- return width;
-});
-
-const skinName = computed(() => {
- return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
-});
-
-const langName = computed(() => {
- const lang = useLocale().getLocale.value;
- return ['zh_CN', ''].includes(lang) ? lang : 'zh_CN';
-});
-
-const initOptions = computed((): RawEditorSettings => {
- const { height, options, toolbar, plugins, toolbar_groups } = props;
-
- const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
- return {
- selector: `#${unref(tinymceId)}`,
- height,
- min_height: 450,
- font_formats: '寰蒋闆呴粦=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;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
- fontsize_formats: '10px 11px 12px 14px 16px 18px 24px 36px 48px 48px 56px 72px',
- image_advtab: true,
- importcss_append: true, // 鍏佽鏍峰紡鐢熸晥
- toolbar,
- toolbar_groups,
- toolbar_sticky: true, // 绮樻�у伐鍏锋爮锛堟垨鍋滈潬宸ュ叿鏍忥級锛屽湪鍚戜笅婊氬姩缃戦〉鐩村埌涓嶅啀鍙缂栬緫鍣ㄦ椂锛屽皢宸ュ叿鏍忓拰鑿滃崟鍋滈潬鍦ㄥ睆骞曢《閮�
- toolbar_mode: 'floating', //榛樿wrap涓嶆敹缂╁伐鍏锋爮锛屽彇鍊间负floating鎴杝liding鏃讹紝灏嗙涓�琛屾斁涓嶄笅鐨勫伐鍏锋爮鎸夐挳缂╄繘鎶藉眽锛�3涓偣鐨勫浘鏍囷級閲岋紝scrolling鍒欓噰鐢ㄧЩ鍔ㄧ鐨勬í绾挎粴鍔ㄦ柟寮忋��
- // style_formats_autohide: true,
- menubar: false,
- branding: false,
- elementpath: false,
- // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
- plugins,
- language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
- language: langName.value,
- default_link_target: '_blank',
- link_title: false,
- statusbar: false,
- object_resizing: false,
- auto_focus: true, //璁╃紪杈戝櫒鍔犺浇瀹屾垚鍚庤嚜鍔ㄨ幏寰楀厜鏍囩劍鐐�
- autosave_ask_before_unload: true,
- autosave_interval: '30s',
- skin: skinName.value,
- skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
- content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
- ...options,
- setup: (editor: Editor) => {
- editorRef.value = editor;
- editor.on('init', (e) => initSetup(e));
+ const props = defineProps({
+ options: {
+ type: Object as PropType<Partial<RawEditorSettings>>,
+ default: () => ({}),
},
- };
-});
+ value: {
+ type: String,
+ },
-const disabled = computed(() => {
- const { options } = props;
- const getdDisabled = options && Reflect.get(options, 'readonly');
- const editor = unref(editorRef);
- if (editor) {
- editor.setMode(getdDisabled ? 'readonly' : 'design');
+ toolbar: {
+ type: Array as PropType<string[]>,
+ default: defaultToolbar,
+ },
+ plugins: {
+ type: Array as PropType<string[]>,
+ default: defaultPlugins,
+ },
+ toolbar_groups: {
+ type: Object as PropType<{}>,
+ default: defaultStyleFormats,
+ },
+ modelValue: {
+ type: String,
+ },
+ height: {
+ type: [Number, String] as PropType<string | number>,
+ required: false,
+ default: 400,
+ },
+ width: {
+ type: [Number, String] as PropType<string | number>,
+ required: false,
+ default: 'auto',
+ },
+ showImageUpload: {
+ type: Boolean,
+ default: true,
+ },
+ fontsize: {
+ type: String,
+ },
+ isElse: {
+ type: Boolean,
+ default: true,
+ },
+ isText: {
+ type: Boolean,
+ default: true,
+ },
+ isImg: {
+ type: Boolean,
+ default: true,
+ },
+ });
+
+ const emit = defineEmits(['change', 'update:modelValue', 'inited', 'init-error']);
+
+ const attrs = useAttrs();
+ const editorRef = ref<Editor | null>(null);
+ const fullscreen = ref(false);
+ const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+ const elRef = ref<HTMLElement | null>(null);
+
+ const { prefixCls } = useDesign('tinymce-container');
+
+ const appStore = useAppStore();
+
+ const containerWidth = computed(() => {
+ const width = props.width;
+ if (isNumber(width)) {
+ return `${width}px`;
+ }
+ return width;
+ });
+
+ const skinName = computed(() => {
+ return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
+ });
+
+ const langName = computed(() => {
+ const lang = useLocale().getLocale.value;
+ return ['zh_CN', ''].includes(lang) ? lang : 'zh_CN';
+ });
+
+ const initOptions = computed((): RawEditorSettings => {
+ const { height, options, toolbar, plugins, toolbar_groups } = props;
+
+ const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
+ return {
+ selector: `#${unref(tinymceId)}`,
+ height,
+ min_height: 450,
+ font_formats:
+ '寰蒋闆呴粦=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;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
+ fontsize_formats: '10px 11px 12px 14px 16px 18px 24px 36px 48px 48px 56px 72px',
+ image_advtab: true,
+ importcss_append: true, // 鍏佽鏍峰紡鐢熸晥
+ toolbar,
+ toolbar_groups,
+ toolbar_sticky: true, // 绮樻�у伐鍏锋爮锛堟垨鍋滈潬宸ュ叿鏍忥級锛屽湪鍚戜笅婊氬姩缃戦〉鐩村埌涓嶅啀鍙缂栬緫鍣ㄦ椂锛屽皢宸ュ叿鏍忓拰鑿滃崟鍋滈潬鍦ㄥ睆骞曢《閮�
+ toolbar_mode: 'floating', //榛樿wrap涓嶆敹缂╁伐鍏锋爮锛屽彇鍊间负floating鎴杝liding鏃讹紝灏嗙涓�琛屾斁涓嶄笅鐨勫伐鍏锋爮鎸夐挳缂╄繘鎶藉眽锛�3涓偣鐨勫浘鏍囷級閲岋紝scrolling鍒欓噰鐢ㄧЩ鍔ㄧ鐨勬í绾挎粴鍔ㄦ柟寮忋��
+ // style_formats_autohide: true,
+ menubar: false,
+ branding: false,
+ elementpath: false,
+ // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+ plugins,
+ language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
+ language: langName.value,
+ default_link_target: '_blank',
+ link_title: false,
+ statusbar: false,
+ object_resizing: false,
+ auto_focus: true, //璁╃紪杈戝櫒鍔犺浇瀹屾垚鍚庤嚜鍔ㄨ幏寰楀厜鏍囩劍鐐�
+ autosave_ask_before_unload: true,
+ autosave_interval: '30s',
+ skin: skinName.value,
+ skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
+ content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
+ ...options,
+ setup: (editor: Editor) => {
+ editorRef.value = editor;
+ editor.on('init', (e) => initSetup(e));
+ },
+ };
+ });
+
+ const disabled = computed(() => {
+ const { options } = props;
+ const getdDisabled = options && Reflect.get(options, 'readonly');
+ const editor = unref(editorRef);
+ if (editor) {
+ editor.setMode(getdDisabled ? 'readonly' : 'design');
+ }
+ return getdDisabled ?? false;
+ });
+
+ watch(
+ () => attrs.disabled,
+ () => {
+ const editor = unref(editorRef);
+ if (!editor) {
+ return;
+ }
+ editor.setMode(attrs.disabled ? 'readonly' : 'design');
+ },
+ );
+
+ onMountedOrActivated(() => {
+ if (!initOptions.value.inline) {
+ tinymceId.value = buildShortUUID('tiny-vue');
+ }
+ nextTick(() => {
+ setTimeout(() => {
+ initEditor();
+ }, 30);
+ });
+ });
+
+ onBeforeUnmount(() => {
+ destory();
+ });
+
+ onDeactivated(() => {
+ destory();
+ });
+
+ function destory() {
+ if (tinymce !== null) {
+ tinymce?.remove?.(unref(initOptions).selector!);
+ }
}
- return getdDisabled ?? false;
-});
-watch(
- () => attrs.disabled,
- () => {
+ function initEditor() {
+ const el = unref(elRef);
+ if (el) {
+ el.style.visibility = '';
+ }
+ tinymce
+ .init(unref(initOptions))
+ .then((editor) => {
+ emit('inited', editor);
+ })
+ .catch((err) => {
+ emit('init-error', err);
+ });
+ }
+
+ function initSetup(e) {
const editor = unref(editorRef);
if (!editor) {
return;
}
- editor.setMode(attrs.disabled ? 'readonly' : 'design');
- },
-);
+ const value = props.modelValue || '';
-onMountedOrActivated(() => {
- if (!initOptions.value.inline) {
- tinymceId.value = buildShortUUID('tiny-vue');
+ editor.setContent(value);
+ bindModelHandlers(editor);
+ bindHandlers(e, attrs, unref(editorRef));
}
- nextTick(() => {
- setTimeout(() => {
- initEditor();
- }, 30);
- });
-});
-onBeforeUnmount(() => {
- destory();
-});
-
-onDeactivated(() => {
- destory();
-});
-
-function destory() {
- if (tinymce !== null) {
- tinymce?.remove?.(unref(initOptions).selector!);
+ 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);
+ }
}
-}
+ const fileRef = ref();
-function initEditor() {
- const el = unref(elRef);
- if (el) {
- el.style.visibility = '';
- }
- tinymce
- .init(unref(initOptions))
- .then((editor) => {
- emit('inited', editor);
- })
- .catch((err) => {
- emit('init-error', err);
+ function bindModelHandlers(editor: any) {
+ const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
+ const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
+
+ watch(
+ () => props.modelValue,
+ (val, prevVal) => {
+ setValue(editor, val, prevVal);
+ },
+ );
+
+ watch(
+ () => props.value,
+ (val, prevVal) => {
+ setValue(editor, val, prevVal);
+ },
+ {
+ immediate: true,
+ },
+ );
+
+ editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
+ const content = editor.getContent({ format: attrs.outputFormat });
+ emit('update:modelValue', content);
+ const data = {
+ content,
+ fileUNID: fileListTemp.value,
+ };
+ emit('change', data);
});
-}
-function initSetup(e) {
- const editor = unref(editorRef);
- if (!editor) {
- return;
+ editor.on('FullscreenStateChanged', (e) => {
+ fullscreen.value = e.state;
+ });
}
- const value = props.modelValue || '';
- 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 handleImageUploading(name: string) {
+ const editor = unref(editorRef);
+ if (!editor) {
+ return;
+ }
+ editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+ const content = editor?.getContent() ?? '';
+ setValue(editor, content);
}
-}
-function bindModelHandlers(editor: any) {
- const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
- const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
-
- watch(
- () => props.modelValue,
- (val, prevVal) => {
- setValue(editor, val, prevVal);
- },
- );
-
- watch(
- () => props.value,
- (val, prevVal) => {
- setValue(editor, val, prevVal);
- },
- {
- immediate: true,
- },
- );
-
- editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
- const content = editor.getContent({ format: attrs.outputFormat });
- emit('update:modelValue', content);
- emit('change', content);
- });
-
- editor.on('FullscreenStateChanged', (e) => {
- fullscreen.value = e.state;
- });
-}
-
-function handleImageUploading(name: string) {
- const editor = unref(editorRef);
- if (!editor) {
- return;
+ 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);
}
- 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;
+ function getUploadingImgName(name: string) {
+ return `[uploading:${name}]`;
}
- const content = editor?.getContent() ?? '';
- const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
- setValue(editor, val);
-}
-function getUploadingImgName(name: string) {
- return `[uploading:${name}]`;
-}
+ // 闄勪欢
+ const fileListTemp = ref([]);
+ function fileListChange(data) {
+ fileListTemp.value = data;
+ }
</script>
-<style lang="less">
-@prefix-cls: ~'@{namespace}-tinymce-container';
+<style lang="less" scope>
+ @prefix-cls: ~'@{namespace}-tinymce-container';
-.@{prefix-cls} {
- position: relative;
- line-height: normal;
+ .@{prefix-cls} {
+ position: relative;
+ line-height: normal;
- textarea {
- visibility: hidden;
- z-index: -1;
+ textarea {
+ visibility: hidden;
+ z-index: -1;
+ }
}
-}
-.tox-statusbar{
- display: flex;
- border-bottom-right-radius: 8px;
- border-bottom-left-radius: 8px;
- background: #f0f2f5;
-}
+ .my-upload-list {
+ // 杩囨浮
+ position: absolute;
+ left: 78px;
+ transition: all 0.3s;
+ }
-.icon-text{
-margin-right: 10px;
-font-size: 14px;
-}
+ .tox-statusbar {
+ display: flex;
+ // position: absolute;
+ min-height: 40px;
+ border-bottom-right-radius: 8px;
+ border-bottom-left-radius: 8px;
+ background: #f0f2f5;
+ }
+
+ .icon-text {
+ margin-right: 10px;
+ font-size: 14px;
+ }
+
+ .ant-upload-list-picture {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .ant-upload-list-picture-card {
+ display: flex;
+ justify-content: space-between;
+ width: 24vw;
+ margin-right: 10px;
+ padding: 5px 10px;
+ background-color: #edf3f9;
+
+ a {
+ padding: 0 5px;
+ font-size: 12px;
+ }
+ }
</style>
--
Gitblit v1.8.0