vue-admin-studentmanagent/src/components/Editor/index.vue

<template>
  <div ref="editorRef" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount, unref, watch } from 'vue'
import { editorProps } from './props'
import E from 'wangeditor'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
export default defineComponent({
  name: 'Editor',
  props: editorProps,
  emits: ['change', 'focus', 'blur', 'update:value'],
  setup(props, { emit }) {
    const editorRef = ref<HTMLElement | null>(null)
    const editor = ref<E | null>(null)

    onMounted(() => {
      createdEditor()
    })

    onBeforeUnmount(() => {
      if (editor.value) {
        editor.value.destroy()
        editor.value = null
      }
    })

    watch(
      () => props.value,
      (value: string) => {
        if (editor.value) {
          editor.value.txt.html(value)
        }
      },
      {
        immediate: true
      }
    )

    function createdEditor(): void {
      editor.value = new E(unref(editorRef) as any)
      initConfig(editor.value)
      editor.value.create()
      editor.value.txt.html(props.value)
    }

    function initConfig(editor: any): void {
      const {
        height,
        zIndex,
        placeholder,
        focus,
        customAlert,
        menus,
        colors,
        fontNames,
        lineHeights,
        showFullScreen,
        onchangeTimeout
      } = props.config

      // 设置编辑区域高度为 500px
      editor.config.height = height

      // 设置zIndex
      editor.config.zIndex = zIndex

      // 设置 placeholder 提示文字
      editor.config.placeholder = placeholder

      // 设置是否自动聚焦
      editor.config.focus = focus

      // 配置菜单
      editor.config.menus = menus

      // 配置颜色（文字颜色、背景色）
      editor.config.colors = colors

      // 配置字体
      editor.config.fontNames = fontNames

      // 配置行高
      editor.config.lineHeights = lineHeights

      // 代码高亮
      editor.highlight = hljs

      // 配置全屏
      editor.config.showFullScreen = showFullScreen

      // 编辑器 customAlert 是对全局的alert做了统一处理，默认为 window.alert。
      // 如觉得浏览器自带的alert体验不佳，可自定义 alert，以便于达到与自身项目统一的alert效果。
      editor.config.customAlert = customAlert

      // 图片上传默认使用base64
      editor.config.uploadImgShowBase64 = true

      // 配置 onchange 回调函数
      editor.config.onchange = (html: string) => {
        const text = editor.txt.text()
        emitFun(editor, html, 'change')
        emit('update:value', props.valueType === 'html' ? html : text)
      }
      // 配置触发 onchange 的时间频率，默认为 200ms
      editor.config.onchangeTimeout = onchangeTimeout

      // 编辑区域 focus（聚焦）和 blur（失焦）时触发的回调函数。
      editor.config.onblur = (html: string) => {
        emitFun(editor, html, 'blur')
      }
      editor.config.onfocus = (html: string) => {
        emitFun(editor, html, 'focus')
      }
    }

    function emitFun(editor: any, html: string, type: 'change' | 'focus' | 'blur'): void {
      const text = editor.txt.text()
      emit(type, props.valueType === 'html' ? html : text)
    }

    return {
      editorRef
    }
  }
})
</script>

<style>
</style>