Merge branch 'feng-v1-editor' of http://192.168.100.20:9090/r/onbus_crm int...

Sanakey

5 天以前 2af71bcf522c485ea005184c977986374a7dcc4a

 src/components/Tinymce/src/Editor.vue

@@ -9,6 +9,7 @@
    <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"
@@ -21,38 +22,40 @@
        <template #iconRender><PaperClipOutlined /></template>
        <template #itemRender="{ file, fileList, actions }">
          <a-space class="ant-upload-list-picture-card">
            <span style="display: flex">
            <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 >
              <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'>
            <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 >
            <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 :class="fileListTemp.length > 0 ? 'my-upload-list' : ''">
        <div style="display: flex">
          <ImgUpload
            :fullscreen="fullscreen"
            @uploading="handleImageUploading"
            @done="handleDone"
            v-if="showImageUpload"
            v-if="isImg"
            v-show="editorRef"
            :title="'图片'"
            :disabled="disabled"
            :accept="'.jpg,.jpeg,.gif,.png,.webp'"
          />
          <a-button type="text" size="small">
          <a-button v-if="isText" type="text" size="small">
            <SnippetsOutlined />
            快速文本</a-button
          >
@@ -197,6 +200,18 @@
    },
    fontsize: {
      type: String,
    },
    isElse: {
      type: Boolean,
      default: true,
    },
    isText: {
      type: Boolean,
      default: true,
    },
    isImg: {
      type: Boolean,
      default: true,
    },
  });

@@ -382,8 +397,8 @@
      emit('update:modelValue', content);
      const data = {
        content,
        fileUNID:fileListTemp.value
      }
        fileUNID: fileListTemp.value,
      };
      emit('change', data);
    });

@@ -418,24 +433,24 @@

  // 附件
  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
    },
    // {
    //   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);
@@ -446,26 +461,25 @@
      } else {
        item.editor = false;
      }
      return item
      return item;
    });
  }
  function fnSaveRename(file, fileList) {
    fileListTemp.value = fileList.map((item) => {
      if (file.uid == item.uid) {
         item.name = item.tempName;
        item.name = item.tempName;
        item.editor = false;
      }
      return item
      return item;
    });
  }
  function fnOffRename(file, fileList){
  function fnOffRename(file, fileList) {
    fileListTemp.value = fileList.map((item) => {
      if (file.uid == item.uid) {
        item.editor = false;
      }
      return item
      return item;
    });

  }
</script>
<style lang="less" scope>
@@ -481,9 +495,17 @@
    }
  }

  .my-upload-list {
    // 过渡
    position: absolute;
    left: 78px;
    transition: all 0.3s;
  }

  .tox-statusbar {
    display: flex;
    // position: absolute;
    min-height: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: #f0f2f5;
@@ -496,6 +518,7 @@

  .ant-upload-list-picture {
    display: flex;
    flex-wrap: wrap;
  }

  .ant-upload-list-picture-card {