resource-admin/src/components/u-editor/index.tsx

import axios from 'axios'
import dayjs from 'dayjs'
import { NUpload, useMessage, NModal } from 'naive-ui'
import { defineComponent, reactive, ref, watch } from 'vue'
import { VueUeditorWrap } from 'vue-ueditor-wrap'
import { policy } from '../upload-file/api'
import path from 'path'
declare const window: Window & { UE: any }
export default defineComponent({
  name: 'u-editor',
  props: {
    isDisable: {
      type: Boolean,
      default: false
    },
    bucketName: {
      type: String,
      default: () => 'gyt'
    },
    path: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['submit', 'update:modelValue'],
  setup(props, ctx) {
    const value = ref()
    const visiable = ref(false)
    const state = reactive({
      value: null as any,
      vueUeditor: null,
      ossUploadUrl: `https://${props.bucketName}.ks3-cn-beijing.ksyuncs.com/`,
      accept: '*'
    })
    const message = useMessage()
    const searchForm = reactive({
      fileList: [] as any,
      coverImg: ''
    })

    const UpLoadStates = reactive({
      policy: '',
      signature: '',
      key: '',
      KSSAccessKeyId: '',
      acl: 'public-read',
      name: ''
    }) as any
    const uploadRef = ref()
    const editorConfig = {
      UEDITOR_HOME_URL: './UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1
      // serverUrl: '/api-admin/uploadFile', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      // uploadUrl: '/api-admin/uploadFile',
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 400,
      // 初始容器宽度
      initialFrameWidth: '100%'
    }

    const ready = (editor: any) => {
      console.log('ready', editor)
      if (props.isDisable) {
        editor.setDisabled()
      } else {
        editor.setEnabled()
      }
    }

    const addCustimButtom = (e: any) => {
      window.UE.registerUI(
        'preview',
        function (editor: any, uiName: String) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () {
              editor.execCommand('inserthtml', ``)
            }
          })
          var btn = new window.UE.ui.Button({
            name: 'preview',
            title: '预览',
            cssRules: `background-position: -420px -18px;`,
            onclick: function () {
              // 渲染dialog
              // that.dialogVisible = true
              visiable.value = true
              editor.execCommand(uiName)
            }
          })
          return btn
        },
        99
      )
    }

    watch(
      () => value.value,
      (val) => {
        ctx.emit('update:modelValue', val)
      },
      {
        deep: true
        // immediate: true // 必须要深度监听，否则初始值赋不进去
      }
    )

    watch(
      () => props.modelValue,
      (v1) => {
        value.value = v1
      },
      {
        deep: true,
        immediate: true // 必须要深度监听，否则初始值赋不进去
      }
    )
    return () => (
      <>
        <VueUeditorWrap
          style={{ with: '100%' }}
          v-model={value.value}
          config={editorConfig}
          ref={state.vueUeditor}
          editorId={'editor-demo-01' + new Date().getTime()}
          ready={ready}
          onBeforeInit={addCustimButtom}
        />
        <NModal
          v-model:show={visiable.value}
          preset="dialog"
          showIcon={false}
          title="预览"
          style={{ width: '400px' }}
        >
          {/* @cropper-no="error" @cropper-ok="success" */}
          <div v-html={value.value}></div>
        </NModal>
      </>
    )
  }
})