用来用去还是用回了ueditor-Vue富文本编辑器二次扩展

<template>
  <div style="border: 1px solid #ccc">
    <vue-ueditor-wrap
      v-model="data"
      :config="editorConfig"
      :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
      ref="editorRef"
    ></vue-ueditor-wrap>
    <diy-storage ref="storageImg" style="display: none" @confirm="getAttachmentFileList"></diy-storage>
    <diy-storage
      ref="storageVideo"
      type="video"
      accept=".rm,.rmvb,.wmv,.avi,.mpg,.mpeg,.mp4"
      style="display: none"
      @confirm="getAttachmentVideoFileList"
    ></diy-storage>
  </div>
</template>
 
<script setup name="DiyEditor">
import { ref } from 'vue';
import { VueUeditorWrap } from 'vue-ueditor-wrap';
import { useVModel } from '@vueuse/core';
import DiyStorage from '@/components/upload/storage.vue';
import { Session } from '@/utils/storage';
const editorRef = ref();
const storageImg = ref(null);
const storageVideo = ref(null);
 
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  height: {
    type: Number,
    default: 300,
  },
});
 
const emit = defineEmits(['update:modelValue', 'handleBlur']);
const data = useVModel(props, 'modelValue', emit);
 
const serverHeaders = {
  Authorization: Session.get('token'),
};
const editorConfig = ref({
  debug: false,
  UEDITOR_HOME_URL: import.meta.env.MODE == 'development' ? '/public/ueditor/' : import.meta.env.VITE_BUILD_DIR + '/ueditor/',
  serverUrl: (process.env.NODE_ENV === 'production' ? '' : '/api') + '/sys/storage/upload',
  serverHeaders,
  // 编辑器不自动被内容撑高
  autoHeightEnabled: false,
  // 初始容器高度
  initialFrameHeight: props.height,
  // 初始容器宽度
  initialFrameWidth: '100%',
  toolbarCallback: function (cmd, editor) {
    editorRef.value = editor;
    if (cmd == 'insertimage') {
      storageImg.value.handleStorageDlg('', '上传图片');
      return true;
    } else if (cmd == 'insertvideo') {
      storageVideo.value.handleStorageDlg('', '上传视频');
      return true;
    }
  },
});
 
const getAttachmentFileList = (files) => {
  if (!files.length) {
    return;
  }
  files.forEach((element) => {
    editorRef.value?.execCommand('insertHtml', "<img src='" + element.url + "'/>");
  });
};
 
const getAttachmentVideoFileList = (files) => {
  if (!files.length) {
    return;
  }
  files.forEach((element) => {
    editorRef.value?.execCommand('insertHtml', "<video src='" + element.url + "'/>");
  });
};
</script>

<template>
  <div class="container">
    <div class="flex diygw-col-24">
      <el-form-item prop="editor" class="diygw-el-rate" label="多行输入" label-width="80px">
        <diy-editor v-model="editor"></diy-editor>
      </el-form-item>
    </div>
    <div class="clearfix"></div>
  </div>
</template>
 
<script>
  import { useRouter, useRoute } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/stores/userInfo';
 
  import { ElMessageBox, ElMessage } from 'element-plus';
 
  import DiyEditor from '@/components/editor/index.vue';
 
  export default {
    components: {
      DiyEditor
    },
    data() {
      return {
        globalOption: {},
        userInfo: {},
        roleDatas: {
          rows: [
            {
              status: '',
              flag: '',
              remark: '',
              roleId: 0,
              roleName: '',
              roleKey: '',
              dataScope: '',
              roleSort: 0,
              createTime: '',
              updateTime: '',
              deleteTime: null,
              userId: null,
              updateUserId: null
            }
          ],
          total: 0,
          code: 0,
          msg: ''
        },
        editor: ''
      };
    },
    methods: {
      getParamData(e, row) {
        row = row || {};
        let dataset = e.currentTarget ? e.currentTarget.dataset : e;
        if (row) {
          dataset = Object.assign(dataset, row);
        }
        return dataset;
      },
      navigateTo(e, row) {
        let dataset = this.getParamData(e, row);
        let { type } = dataset;
        if (type == 'page' || type == 'inner' || type == 'href') {
          this.router.push({
            path: dataset.url,
            query: dataset
          });
        } else if (typeof this[type] == 'function') {
          this[type](dataset);
        } else {
          ElMessage.error('待实现点击事件');
        }
      },
      async init() {},
      // 新增接口 API请求方法
      async roleDatasApi(param, data) {
        param = param || {};
        param = this.getParamData(param);
        let http_url = '/sys/role/all';
        let http_data = {
          tt: param.tt || '1',
          te: param.te || this.t523 || '123'
        };
        let http_header = {
          'Content-Type': 'application/json',
          'Content-Length': '123'
        };
 
        let roleDatas = await this.$http.post(http_url, http_data, http_header, 'json');
        this.roleDatas = roleDatas;
      }
    },
    async mounted() {
      this.router = useRouter();
      this.globalOption = useRoute().query;
      const stores = useUserInfo();
      const { userInfos } = storeToRefs(stores);
      this.userInfo = userInfos;
      await this.init();
    },
    beforeUnmount() {}
  };
</script>
 
<style lang="scss" scoped>
  .container {
    font-size: 12px;
  }
</style>