luoshan_web/library/components/RichText/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2022-12-16 12:14:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-01 11:14:09
-->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      :default-config="toolbarConfig"
      :editor="editorRef"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      v-model="valueHtml"
      :default-config="editorConfig"
      :mode="mode"
      style="min-height: 700px"
      @onChange="changeEdit"
      @onCreated="handleCreated"
    />
  </div>
</template>
<script>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { useUserStore } from '@/store/modules/user'
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  export default {
    components: { Editor, Toolbar },
    props: {
      content: {
        type: String,
        required: true,
      },
    },
    setup(props, { emit }) {
      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()
      const valueHtml = ref(props.content)
      watch(props, (newProps) => {
        valueHtml.value = newProps.content
      })
      // 模拟 ajax 异步获取内容
      onMounted(() => {
        // setTimeout(() => {
        //   this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        // }, 1500)
        // 内容 HTML
      })

      const toolbarConfig = {}
      // const editorConfig = { placeholder: '请输入内容...' }
      const editorConfig = {
        // JS 语法
        MENU_CONF: {},
        placeholder: '请输入内容...',

        // 其他属性...
      }

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })
      const userStore = useUserStore()

      //自定义上传图片
      editorConfig.MENU_CONF['uploadImage'] = {
        server: `${process.env.VUE_APP_BASE_URL}` + '/base/resource/upload',
        // / form-data fieldName ，默认值 'wangeditor-uploaded-image'
        fieldName: 'file',

        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 10 * 1024 * 1024, // 1M

        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 10,

        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],

        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        meta: {
          file_type: 'img',
          dir: 'default',
        },

        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,

        // 自定义增加 http  header
        headers: {
          Authorization: userStore.token,
        },

        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,

        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒

        customInsert(res, insertFn) {
          // JS 语法
          // res 即服务端的返回结果
          console.log('上传图片成功', res)
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(res.data.url)
        },
      }
      const handleCreated = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }

      const changeEdit = () => {
        emit('change-edit', valueHtml.value)
      }
      //富文本编辑器失焦事件
      const handleBlur = (editor) => {
        console.log(valueHtml, 'blur', editor)
      }
      const handleChange = (editor) => {
        console.log('change:', editor.getHtml())
      }
      return {
        editorRef,
        valueHtml,
        mode: 'default', // 或 'simple'
        toolbarConfig,
        editorConfig,
        changeEdit,
        handleBlur,
        handleChange,
        handleCreated,
      }
    },
  }
</script>