index.vue 2.07 KB
<template>
  <vue-ueditor-wrap v-model="content" :config="editorConfig" class="uedBox" @ready="ready" />
</template>

<script setup>
import { ref, watch } from 'vue'
import { computed } from '@vue/reactivity'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  /* 编辑器的内容 */
  modelValue: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const content = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const myEditor = ref(null)

watch(() => [props.disabled, myEditor.value], (value) => {
  if (value[1]) {
    if (value[0]) {
      value[1].setDisabled()
    } else {
      value[1].setEnabled()
    }
  }
})

const editorConfig = ref({
  UEDITOR_HOME_URL: '/UEditor/',
  serverUrl: import.meta.env.VITE_APP_BASE_API + '/upload/ueConfig'
})

function ready(editorInstance) {
  myEditor.value = editorInstance
  editorInstance.options.imageUrlPrefix = import.meta.env.VITE_APP_BASE_API
  editorInstance.options.fileUrlPrefix = import.meta.env.VITE_APP_BASE_API
  editorInstance.options.scrawlUrlPrefix = import.meta.env.VITE_APP_BASE_API
  editorInstance.options.videoUrlPrefix = import.meta.env.VITE_APP_BASE_API

  const _bkGetActionUrl = editorInstance.getActionUrl
  editorInstance.getActionUrl = (action) => {
    if (action === 'uploadimage' || action === 'uploadvideo' || action === 'uploadfile') {
      return import.meta.env.VITE_APP_BASE_API + '/upload/ueUpload?action=' + action
    } else if (action === 'uploadscrawl') {
      return import.meta.env.VITE_APP_BASE_API + '/upload/ueUploadScrawl?action=' + action
    } else {
      return _bkGetActionUrl.call(editorInstance, action)
    }
  }
  if (props.disabled) {
    editorInstance.setDisabled()
  }
}

</script>

<style>
.uedBox{
  width: 100% !important;
}

.edui-editor{
  width: 100% !important;z-index: 99!important;
}
.edui-editor-iframeholder{width: 100%!important;}
.edui-default .edui-button-body, .edui-splitbutton-body, .edui-menubutton-body, .edui-combox-body{
  line-height: 1;
}
</style>