tuanwei-admin/src/views/cms/docs/tinymce.vue

<template>
  <div class="page">
    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
      <!-- 编辑器 -->
      <tinymce-editor
        v-model:value="content"
        :disabled="disabled"
        :init="config"
      />
      <div class="ele-text-info" style="margin-top: 10px">
        <a-space :size="100">
          <div>文档ID: {{ current.docsId }}</div>
          <div>预览地址: {{ `/docs?id=${current.docsId}` }}</div>
          <div>发布时间: {{ current.createTime }}</div>
        </a-space>
      </div>
      <div class="docs-sumbit" v-permission="'cms:docs:update'">
        <a-space>
          <a-button type="primary" @click="save">保存</a-button>
          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
          <!--            <a-button>预览</a-button>-->
          <!--          </router-link>-->
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import 'github-markdown-css/github-markdown-light.css';
  import type { Docs } from '@/api/cms/docs/model';
  import { message } from 'ant-design-vue';
  import TinymceEditor from '@/components/TinymceEditor/index.vue';
  import {
    addDocsContent,
    getDocsContent,
    updateDocsContent
  } from '@/api/cms/docs-content';
  import { DocsContent } from '@/api/cms/docs-content/model';

  const props = defineProps<{
    // 文档 id
    current?: Docs | null;
  }>();

  // 提交状态
  const loading = ref(false);
  // 编辑器内容，双向绑定
  const content = ref('');
  const disabled = ref(false);
  // 是否是修改
  const isUpdate = ref(false);
  const docsContentId = ref(0);

  const form = reactive<DocsContent>({
    docsContentId: 0,
    docsId: 0,
    content: ''
  });

  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
  const config = ref({
    height: 690,
    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
    file_picker_callback: (callback: any, _value: any, meta: any) => {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      // 设定文件可选类型
      if (meta.filetype === 'image') {
        input.setAttribute('accept', 'image/*');
      } else if (meta.filetype === 'media') {
        input.setAttribute('accept', 'video/*');
      }
      input.onchange = () => {
        const file = input.files?.[0];
        if (!file) {
          return;
        }
        if (meta.filetype === 'media') {
          if (!file.type.startsWith('video/')) {
            editorRef.value?.alert({ content: '只能选择视频文件' });
            return;
          }
        }
        if (file.size / 1024 / 1024 > 20) {
          editorRef.value?.alert({ content: '大小不能超过 20MB' });
          return;
        }
        const reader = new FileReader();
        reader.onload = (e) => {
          if (e.target?.result != null) {
            const blob = new Blob([e.target.result], { type: file.type });
            callback(URL.createObjectURL(blob));
          }
        };
        reader.readAsArrayBuffer(file);
      };
      input.click();
    }
  });

  /* 搜索 */
  const reload = () => {
    getDocsContent(Number(props.current?.docsId))
      .then((res) => {
        content.value = String(res.content);
        docsContentId.value = Number(res.docsContentId);
        isUpdate.value = true;
      })
      .catch(() => {
        loading.value = false;
        content.value = '';
        isUpdate.value = false;
      });
  };

  // 保存文档
  const save = () => {
    loading.value = true;
    const docsData = {
      ...form,
      docsContentId: docsContentId.value,
      docsId: props.current?.docsId,
      content: content.value
    };
    const saveOrUpdate = isUpdate.value ? updateDocsContent : addDocsContent;
    saveOrUpdate(docsData)
      .then((msg) => {
        loading.value = false;
        message.success(msg);
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  // 监听文档 id 变化
  watch(
    () => props.current?.docsId,
    () => {
      reload();
    }
  );
</script>

<style lang="less" scoped>
  .sys-category-table :deep(.ant-table-body) {
    overflow: auto !important;
    overflow: overlay !important;
  }

  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
    padding: 0 4px;
    margin-bottom: 0;
  }

  .docs-sumbit {
    margin: 10px 0;
  }
</style>