邮件右键菜单

huangyinfeng

4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5

 src/components/Tinymce/src/Editor.vue

@@ -8,42 +8,20 @@
    ></textarea>
    <slot v-else></slot>
    <div class="p-2 tox-statusbar">
      <a-upload
        v-if="isElse"
        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; flex-wrap: wrap">
              <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 :class="fileListTemp.length > 0 ? 'my-upload-list' : ''">
      <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"
@@ -52,6 +30,7 @@
            v-if="isImg"
            v-show="editorRef"
            :title="'图片'"
            :type="'png'"
            :disabled="disabled"
            :accept="'.jpg,.jpeg,.gif,.png,.webp'"
          />
@@ -68,6 +47,8 @@
<script lang="ts" setup>
  import type { Editor, RawEditorSettings } from 'tinymce';
  import { PaperClipOutlined, UploadOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
  import { useGlobSetting } from '@/hooks/setting';

  import tinymce from 'tinymce/tinymce';
  import 'tinymce/themes/silver';
  import 'tinymce/icons/default/icons';
@@ -144,7 +125,7 @@
    PropType,
    useAttrs,
  } from 'vue';
  import ImgUpload from './ImgUpload.vue';
  import ImgUpload from '@/components/MyUpload/index.vue';
  import {
    plugins as defaultPlugins,
    toolbar as defaultToolbar,
@@ -157,6 +138,8 @@
  import { isNumber } from '@/utils/is';
  import { useLocale } from '@/locales/useLocale';
  import { useAppStore } from '@/store/modules/app';
  const { uploadUrl } = useGlobSetting();
  // console.log(uploadUrl,'uploadUrl');

  defineOptions({ name: 'Tinymce', inheritAttrs: false });

@@ -370,6 +353,7 @@
      editor.setContent(val);
    }
  }
  const fileRef = ref();

  function bindModelHandlers(editor: any) {
    const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
@@ -432,54 +416,9 @@
  }

  // 附件
  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;
    });
  const fileListTemp = ref([]);
  function fileListChange(data) {
    fileListTemp.value = data;
  }
</script>
<style lang="less" scope>