feat:合并分支

Sanakey

2024-09-04 8432b405b25ad58ae23d0b1a60c0b001236d4144

 src/components/Tinymce/src/Editor.vue

@@ -1,22 +1,72 @@
<template>
  <div :class="prefixCls" :style="{ width: containerWidth }">
    <ImgUpload
      :fullscreen="fullscreen"
      @uploading="handleImageUploading"
      @done="handleDone"
      v-if="showImageUpload"
      v-show="editorRef"
      :disabled="disabled"
    />
    <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></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-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">
  import type { RawEditorSettings } from 'tinymce';
<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';
@@ -48,33 +98,69 @@
  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 ImgUpload from './ImgUpload.vue';

  import { toolbar, plugins } from './tinymce';

  import { buildShortUUID } from '/@/utils/uuid';
  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 '/@/hooks/core/onMountedOrActivated';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { isNumber } from '/@/utils/is';
  import { useLocale } from '/@/locales/useLocale';
  import { useAppStore } from '/@/store/modules/app';
  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 tinymceProps = {
  defineOptions({ name: 'Tinymce', inheritAttrs: false });

  const props = defineProps({
    options: {
      type: Object as PropType<Partial<RawEditorSettings>>,
      default: {},
      default: () => ({}),
    },
    value: {
      type: String,
@@ -82,11 +168,15 @@

    toolbar: {
      type: Array as PropType<string[]>,
      default: toolbar,
      default: defaultToolbar,
    },
    plugins: {
      type: Array as PropType<string[]>,
      default: plugins,
      default: defaultPlugins,
    },
    toolbar_groups: {
      type: Object as PropType<{}>,
      default: defaultStyleFormats,
    },
    modelValue: {
      type: String,
@@ -96,7 +186,6 @@
      required: false,
      default: 400,
    },

    width: {
      type: [Number, String] as PropType<string | number>,
      required: false,
@@ -106,217 +195,280 @@
      type: Boolean,
      default: true,
    },
  };

  export default defineComponent({
    name: 'Tinymce',
    components: { ImgUpload },
    inheritAttrs: false,
    props: tinymceProps,
    emits: ['change', 'update:modelValue'],
    setup(props, { emit, attrs }) {
      const editorRef = ref();
      const fullscreen = ref(false);
      const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
      const elRef = ref<Nullable<HTMLElement>>(null);

      const { prefixCls } = useDesign('tinymce-container');

      const appStore = useAppStore();

      const tinymceContent = computed(() => props.modelValue);

      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', 'en'].includes(lang) ? lang : 'zh_CN';
      });

      const initOptions = computed((): RawEditorSettings => {
        const { height, options, toolbar, plugins } = props;
        const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
        return {
          selector: `#${unref(tinymceId)}`,
          height,
          toolbar,
          menubar: 'file edit insert view format table',
          plugins,
          language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
          language: langName.value,
          branding: false,
          default_link_target: '_blank',
          link_title: false,
          object_resizing: false,
          auto_focus: true,
          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) => {
            editorRef.value = editor;
            editor.on('init', (e) => initSetup(e));
          },
        };
      });

      const disabled = computed(() => {
        const { options } = props;
        const getdDisabled = options && Reflect.get(options, 'readonly');
        return getdDisabled ?? false;
      });

      watch(
        () => attrs.disabled,
        () => {
          const editor = unref(editorRef);
          if (!editor) {
            return;
          }
          editor.setMode(attrs.disabled ? 'readonly' : 'design');
        }
      );

      onMountedOrActivated(() => {
        tinymceId.value = buildShortUUID('tiny-vue');
        nextTick(() => {
          setTimeout(() => {
            initEditor();
          }, 30);
        });
      });

      onUnmounted(() => {
        destory();
      });

      onDeactivated(() => {
        destory();
      });

      function destory() {
        if (tinymce !== null) {
          tinymce?.remove?.(unref(editorRef));
        }
      }

      function initEditor() {
        const el = unref(elRef);
        if (el) {
          el.style.visibility = '';
        }
        tinymce.init(unref(initOptions));
      }

      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: Recordable, 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);
        });

        editor.on('FullscreenStateChanged', (e) => {
          fullscreen.value = e.state;
        });
      }

      function handleImageUploading(name: string) {
        const editor = unref(editorRef);
        if (!editor) {
          return;
        }
        const content = editor?.getContent() ?? '';
        setValue(editor, `${content}\n${getUploadingImgName(name)}`);
      }

      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}]`;
      }

      return {
        prefixCls,
        containerWidth,
        initOptions,
        tinymceContent,
        elRef,
        tinymceId,
        handleImageUploading,
        handleDone,
        editorRef,
        fullscreen,
        disabled,
      };
    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或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" scoped></style>

<style lang="less">
<style lang="less" scope>
  @prefix-cls: ~'@{namespace}-tinymce-container';

  .@{prefix-cls} {
@@ -324,8 +476,39 @@
    line-height: normal;

    textarea {
      z-index: -1;
      visibility: hidden;
      z-index: -1;
    }
  }

  .tox-statusbar {
    display: flex;
    // position: absolute;
    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;
  }

  .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>