| | |
| | | <template> |
| | | <div class="tinymce-container" :style="{ width: containerWidth }"> |
| | | <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea> |
| | | <div :class="prefixCls" :style="{ width: containerWidth }"> |
| | | <textarea |
| | | :id="tinymceId" |
| | | ref="elRef" |
| | | :style="{ visibility: 'hidden' }" |
| | | v-if="!initOptions.inline" |
| | | ></textarea> |
| | | <slot v-else></slot> |
| | | <div class="p-2 tox-statusbar"> |
| | | <a-upload |
| | | v-model:file-list="fileListTemp" |
| | | action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
| | | list-type="picture" |
| | | class="upload-list-inline" |
| | | > |
| | | <a-button type="text" size="small" style="margin: 0 auto"> |
| | | <upload-outlined></upload-outlined> |
| | | 附件 |
| | | </a-button> |
| | | <template #iconRender><PaperClipOutlined /></template> |
| | | <template #itemRender="{ file, fileList, actions }"> |
| | | <a-space class="ant-upload-list-picture-card"> |
| | | <span style="display: flex"> |
| | | <PaperClipOutlined style="margin-right: 4px" /> |
| | | <span v-if='!file.editor' :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span> |
| | | <span v-else > |
| | | <a-input size="small" v-model:value="file.tempName"></a-input> |
| | | </span> |
| | | </span> |
| | | <span v-if='!file.editor'> |
| | | <a href="javascript:;" @click="actions.preview">预览</a> |
| | | <a href="javascript:;" @click="fnRename(file, fileList)">重命名</a> |
| | | <a href="javascript:;" @click="actions.remove">删除</a> |
| | | </span> |
| | | <span v-else > |
| | | <a href="javascript:;" @click="fnSaveRename(file, fileList)">保存</a> |
| | | <a href="javascript:;" @click="fnOffRename(file, fileList)">取消</a> |
| | | </span> |
| | | </a-space> |
| | | </template> |
| | | </a-upload> |
| | | <div style="position: absolute; left: 78px"> |
| | | <div style="display: flex"> |
| | | <ImgUpload |
| | | :fullscreen="fullscreen" |
| | | @uploading="handleImageUploading" |
| | | @done="handleDone" |
| | | v-if="showImageUpload" |
| | | v-show="editorRef" |
| | | :title="'图片'" |
| | | :disabled="disabled" |
| | | :accept="'.jpg,.jpeg,.gif,.png,.webp'" |
| | | /> |
| | | <a-button type="text" size="small"> |
| | | <SnippetsOutlined /> |
| | | 快速文本</a-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | <script lang="ts" setup> |
| | | import type { Editor, RawEditorSettings } from 'tinymce'; |
| | | import { PaperClipOutlined, UploadOutlined, SnippetsOutlined } from '@ant-design/icons-vue'; |
| | | 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/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/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 { |
| | | defineComponent, |
| | | computed, |
| | | nextTick, |
| | | ref, |
| | | unref, |
| | | watch, |
| | | onUnmounted, |
| | | onDeactivated, |
| | | onBeforeUnmount, |
| | | PropType, |
| | | useAttrs, |
| | | } from 'vue'; |
| | | import { basicProps } from './props'; |
| | | import toolbar from './toolbar'; |
| | | import plugins from './plugins'; |
| | | import { getTinymce } from './getTinymce'; |
| | | import { useScript } from '/@/hooks/web/useScript'; |
| | | import { snowUuid } from '/@/utils/uuid'; |
| | | 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 lineHeight from './lineHeight'; |
| | | import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'; |
| | | 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 CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1'; |
| | | defineOptions({ name: 'Tinymce', inheritAttrs: false }); |
| | | |
| | | const tinymceScriptSrc = `${CDN_URL}/tinymce.min.js`; |
| | | const props = defineProps({ |
| | | options: { |
| | | type: Object as PropType<Partial<RawEditorSettings>>, |
| | | default: () => ({}), |
| | | }, |
| | | value: { |
| | | type: String, |
| | | }, |
| | | |
| | | export default defineComponent({ |
| | | name: 'Tinymce', |
| | | inheritAttrs: false, |
| | | props: basicProps, |
| | | emits: ['change', 'update:modelValue'], |
| | | setup(props, { emit, attrs }) { |
| | | const editorRef = ref<any>(null); |
| | | const tinymceId = ref<string>(snowUuid('tiny-vue')); |
| | | const elRef = ref<Nullable<HTMLElement>>(null); |
| | | |
| | | const tinymceContent = computed(() => { |
| | | return props.modelValue; |
| | | }); |
| | | |
| | | const containerWidth = computed(() => { |
| | | const width = props.width; |
| | | if (/^[\d]+(\.[\d]+)?$/.test(width.toString())) { |
| | | return `${width}px`; |
| | | } |
| | | return width; |
| | | }); |
| | | |
| | | const initOptions = computed(() => { |
| | | const { height, options } = props; |
| | | return { |
| | | selector: `#${unref(tinymceId)}`, |
| | | base_url: CDN_URL, |
| | | suffix: '.min', |
| | | height: height, |
| | | toolbar: toolbar, |
| | | menubar: 'file edit insert view format table', |
| | | plugins: plugins, |
| | | // 语言包 |
| | | language_url: 'resource/tinymce/langs/zh_CN.js', |
| | | // 中文 |
| | | language: 'zh_CN', |
| | | default_link_target: '_blank', |
| | | link_title: false, |
| | | advlist_bullet_styles: 'square', |
| | | advlist_number_styles: 'default', |
| | | object_resizing: false, |
| | | fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px 36px 48px', |
| | | lineheight_formats: '1 1.5 1.75 2.0 3.0 4.0 5.0', |
| | | ...options, |
| | | setup: (editor: any) => { |
| | | editorRef.value = editor; |
| | | editor.on('init', (e: Event) => initSetup(e)); |
| | | }, |
| | | }; |
| | | }); |
| | | |
| | | const { toPromise } = useScript({ |
| | | src: tinymceScriptSrc, |
| | | }); |
| | | |
| | | watch( |
| | | () => attrs.disabled, |
| | | () => { |
| | | const editor = unref(editorRef); |
| | | if (!editor) return; |
| | | editor.setMode(attrs.disabled ? 'readonly' : 'design'); |
| | | } |
| | | ); |
| | | onMountedOrActivated(() => { |
| | | tinymceId.value = snowUuid('tiny-vue'); |
| | | nextTick(() => { |
| | | init(); |
| | | }); |
| | | }); |
| | | |
| | | onUnmounted(() => { |
| | | destory(); |
| | | }); |
| | | |
| | | onDeactivated(() => { |
| | | destory(); |
| | | }); |
| | | |
| | | function destory() { |
| | | if (getTinymce() !== null) { |
| | | getTinymce()?.remove?.(unref(editorRef)); |
| | | } |
| | | } |
| | | |
| | | function init() { |
| | | toPromise().then(() => { |
| | | setTimeout(() => { |
| | | initEditor(); |
| | | }, 0); |
| | | }); |
| | | } |
| | | |
| | | function initEditor() { |
| | | getTinymce().PluginManager.add('lineHeight', lineHeight(getTinymce())); |
| | | const el = unref(elRef); |
| | | if (el) { |
| | | el.style.visibility = ''; |
| | | } |
| | | getTinymce().init(unref(initOptions)); |
| | | } |
| | | |
| | | function initSetup(e: Event) { |
| | | const editor = unref(editorRef); |
| | | if (!editor) return; |
| | | const value = props.modelValue || ''; |
| | | |
| | | editor.setContent(value); |
| | | bindModelHandlers(editor); |
| | | bindHandlers(e, attrs, unref(editorRef)); |
| | | } |
| | | |
| | | function setValue(editor: 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 ? attrs.modelEvents : null; |
| | | const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents; |
| | | |
| | | watch( |
| | | () => props.modelValue, |
| | | (val: string, prevVal: string) => { |
| | | setValue(editor, val, prevVal); |
| | | } |
| | | ); |
| | | |
| | | watch( |
| | | () => props.value, |
| | | (val: string, prevVal: string) => { |
| | | 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); |
| | | }); |
| | | } |
| | | |
| | | return { |
| | | containerWidth, |
| | | initOptions, |
| | | tinymceContent, |
| | | tinymceScriptSrc, |
| | | elRef, |
| | | tinymceId, |
| | | }; |
| | | 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, |
| | | }, |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .tinymce-container { |
| | | 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或sliding时,将第一行放不下的工具栏按钮缩进抽屉(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!); |
| | | } |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | 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 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); |
| | | }); |
| | | |
| | | editor.on('FullscreenStateChanged', (e) => { |
| | | fullscreen.value = e.state; |
| | | }); |
| | | } |
| | | |
| | | 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); |
| | | } |
| | | |
| | | function getUploadingImgName(name: string) { |
| | | return `[uploading:${name}]`; |
| | | } |
| | | |
| | | // 附件 |
| | | const fileListTemp = ref<UploadProps['fileList']>([ |
| | | { |
| | | uid: '-1', |
| | | name: 'xxx.png', |
| | | tempName:'xxx', |
| | | status: 'done', |
| | | url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
| | | thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
| | | editor:false |
| | | }, |
| | | { |
| | | uid: '-2', |
| | | name: 'yyy.png', |
| | | tempName:'yyy', |
| | | status: 'done', |
| | | url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
| | | thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
| | | editor:false |
| | | }, |
| | | ]); |
| | | function fnRename(file, fileList) { |
| | | console.log(file, fileList); |
| | | fileListTemp.value = fileList.map((item) => { |
| | | // item.tempName = item.name.split('.').slice(0,-1) |
| | | if (file.uid == item.uid) { |
| | | item.editor = true; |
| | | } else { |
| | | item.editor = false; |
| | | } |
| | | return item |
| | | }); |
| | | } |
| | | function fnSaveRename(file, fileList) { |
| | | fileListTemp.value = fileList.map((item) => { |
| | | if (file.uid == item.uid) { |
| | | item.name = item.tempName; |
| | | item.editor = false; |
| | | } |
| | | return item |
| | | }); |
| | | } |
| | | function fnOffRename(file, fileList){ |
| | | fileListTemp.value = fileList.map((item) => { |
| | | if (file.uid == item.uid) { |
| | | item.editor = false; |
| | | } |
| | | return item |
| | | }); |
| | | |
| | | } |
| | | </script> |
| | | <style lang="less" scope> |
| | | @prefix-cls: ~'@{namespace}-tinymce-container'; |
| | | |
| | | .@{prefix-cls} { |
| | | position: relative; |
| | | line-height: normal; |
| | | |
| | | .mce-fullscreen { |
| | | z-index: 10000; |
| | | textarea { |
| | | visibility: hidden; |
| | | z-index: -1; |
| | | } |
| | | } |
| | | |
| | | .editor-custom-btn-container { |
| | | position: absolute; |
| | | top: 6px; |
| | | right: 6px; |
| | | .tox-statusbar { |
| | | display: flex; |
| | | // position: absolute; |
| | | border-bottom-right-radius: 8px; |
| | | border-bottom-left-radius: 8px; |
| | | background: #f0f2f5; |
| | | } |
| | | |
| | | &.fullscreen { |
| | | position: fixed; |
| | | z-index: 10000; |
| | | .icon-text { |
| | | margin-right: 10px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .ant-upload-list-picture { |
| | | display: flex; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | |
| | | .editor-upload-btn { |
| | | display: inline-block; |
| | | } |
| | | |
| | | textarea { |
| | | z-index: -1; |
| | | visibility: hidden; |
| | | } |
| | | </style> |