electron-4/src/renderer/src/views/components/propertyBox/richText.vue

<template>
  <div class="richText-box" v-if="visible">
    <div class="richText-box-mask"></div>
    <div class="richText-content">
      <div class="richText-header">
        <p>{{ title }}</P>
        <i class="close" @click="close">&#10005</i>
      </div>
      <div ref="toolbarContainer" id="toolbar-container"></div>
      <div ref="editorContainer" id="editor-container"></div>
      <div class="richText-footer">
        <button class="primary" @click="confirm">确认</button>
        <button class="cancel"  @click="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { inject } from "vue";
import { GisApi } from '@/api/gisApi'

const props = defineProps({
});

const host = localStorage.getItem('ip')
const visible = ref(false)
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const toolbarContainer = ref()
const editorContainer = ref()

const title = ref('')

let editor: any
const upload = async (file) => {
  const formData = new FormData();
  formData.append('files', file);
  let res = await GisApi.linkFile(formData)
  if (res.code == 0 || res.code == 200) {
    let url = res.data[0].previewUrl
    if(url && url[0] === '/') {
      url = url.slice(1)
    }
    return url
  }
}
const open = (t = '', content = '') => {
  title.value = t
  visible.value = true
  nextTick(() => {
    const { createEditor, createToolbar } = (window as any).wangEditor
    const editorConfig = {
      placeholder: '请输入正文...',
      MENU_CONF: {
        uploadImage: {
          fieldName: 'file',
          // maxFileSize: 50 * 1024 * 1024,
          // base64LimitSize: 50 * 1024 * 1024, // 50M 以下插入 base64
          server: undefined,
          // // 上传之前触发
          // onBeforeUpload(file) { // TS 语法
          //   // onBeforeUpload(file) {    // JS 语法
          //   // file 选中的文件，格式如 { key: file }
          //   return file

          //   // 可以 return
          //   // 1. return file 或者 new 一个 file ，接下来将上传
          //   // 2. return false ，不上传这个 file
          // },

          // // 上传进度的回调函数
          // onProgress(progress) {  // TS 语法
          //   // onProgress(progress) {       // JS 语法
          //   // progress 是 0-100 的数字
          //   console.log('progress', progress)
          // },

          // // 单个文件上传成功之后
          // onSuccess(file, res) {  // TS 语法
          //   // onSuccess(file, res) {          // JS 语法
          //   console.log(`${file.name} 上传成功`, res)
          // },

          // // 单个文件上传失败
          // onFailed(file, res) {   // TS 语法
          //   // onFailed(file, res) {           // JS 语法
          //   console.log(`${file.name} 上传失败`, res)
          // },

          // // 上传错误，或者触发 timeout 超时
          // onError(file, err, res) {  // TS 语法
          //   // onError(file, err, res) {               // JS 语法
          //   console.log(`${file.name} 上传出错`, err, res)
          // },

          // 自定义上传
          async customUpload(file: any, insertFn: (arg0: string) => void) {  // TS 语法
            // async customUpload(file, insertFn) {                   // JS 语法
            // file 即选中的文件
            // 自己实现上传，并得到图片 url alt href
            // 最后插入图片
            let url = await upload(file)
            insertFn(host + '/' + url)
          }
        },
        uploadVideo: {
          // maxFileSize: 500 * 1024 * 1024,
          server: undefined,
          allowedFileTypes: ['video/mp4', 'video/mp3', 'video/ogg', 'video/webm', 'video/avi'],
          // 自定义上传
          async customUpload(file: any, insertFn: (arg0: string) => void) {
            // async customUpload(file, insertFn) {
            // file 即选中的文件
            // 自己实现上传，并得到图片 url alt href
            // 最后插入图片
            let url = await upload(file)
            insertFn(host + '/' + url)
            // if(_this.#customUploadVideo) {
            //   let url = await _this.#customUploadVideo(file)
            //   insertFn(url, file.name)
            // }
          }
        }
      },
      onChange(editor: { getHtml: () => any; }) {
        const html = editor.getHtml()
        // 也可以同步到 <textarea>
      }
    }
    editor = createEditor({
      selector: '#editor-container',
      html: '<p><br></p>',
      config: editorConfig,
      mode: 'default', // or 'simple'
    })
    const toolbarConfig = {
      // 隐藏菜单
      excludeKeys: [
        'emotion', // 表情
        'insertImage', // 网络图片
        'insertVideo' // 网络视频
      ]
    }
    const toolbar = createToolbar({
      editor: editor,
      selector: '#toolbar-container',
      config: toolbarConfig,
      mode: 'default', // or 'simple'
    })
    editor.on('fullScreen', () => { console.log('fullScreen') })
    editor.setHtml(content)
  })

}
const close = () => {
  visible.value = false
  toolbarContainer.value.innerHTML = ''
  editorContainer.value.innerHTML = ''
}

let confirmRichText

const confirm = () => {
  let html = editor.getHtml()
  confirmRichText && confirmRichText(html)
  close()
  confirmRichText = undefined
}

eventBus.on("openRichText", (t = '', content = '', confirmCallBack) => {
  open(t, content)
  confirmRichText = confirmCallBack
});
</script>

<style scoped lang="scss">
.richText-header {
  p {
    color: #000;
  }

  .close {
    color: #000;
  }
}
</style>