cip-components/cip-form-input/basic/editor/index.js

import WangEditor from 'wangeditor'
import { onMounted, onBeforeUnmount, ref, computed, watchEffect, watch } from 'vue'
import { formInputProps } from '../../form-input-props'
import { defaultMenus } from './config'
import { debounce, isEmpty, isArray } from '@cip/utils/util'

export default {
  name: 'basicEditor',
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, { emit }) {
    const editor = ref()

    const height = computed(() => {
      // 编辑器高度配置
      return props.config?.height ?? null
    })
    const menus = computed(() => {
      // 编辑器菜单配置
      const menu = props.config.menus
      if (isEmpty(menu) || menu === '') return defaultMenus
      if (!isArray(menu)) return menu.split(',')
      return menu
    })
    const colors = computed(() => {
      // 编辑器字体及背景色配置
      return props.config?.colors ?? null
    })
    const fontNames = computed(() => {
      // 编辑器字体配置
      return props.config?.fontNames ?? null
    })
    const fontSizes = computed(() => {
      // 编辑器字号配置
      return props.config?.fontSizes ?? null
    })
    const emotions = computed(() => {
      // 编辑器表情图标配置
      return props.config?.emotions ?? null
    })
    const showFullScreen = computed(() => {
      // 配置全屏功能按钮是否展示
      return props.config?.showFullScreen ?? true
    })
    const showMenuTooltips = computed(() => {
      // 是否显示菜单栏提示
      return props.config?.showMenuTooltips ?? true
    })
    const menuTooltipPosition = computed(() => {
      // 菜单栏提示上标（up）还是下标（down）
      return props.config?.menuTooltipPosition ?? 'up'
    })
    const pasteFilterStyle = computed(() => {
      // 是否开启粘贴样式过滤
      return props.config?.pasteFilterStyle ?? true
    })
    const pasteIgnoreImg = computed(() => {
      // 是否忽略粘贴内容的图片
      return props.config?.pasteIgnoreImg ?? null
    })
    const customUploadImg = computed(() => {
      // 自定义上传图片
      return props.config?.customUploadImg ?? null
    })
    const placeholder = computed(() => {
      // 默认占位符
      return props.config?.placeholder ?? null
    })

    const emitInput = debounce((value) => {
      emit('update:modelValue', value)
    }, 200)
    const clearEmptyKey = (obj) => {
      // 清空value为空的key
      // eslint-disable-next-line
      for (const i in obj) {
        if (isEmpty(obj[i]) || obj[i] === '') delete obj[i]
      }
      return obj
    }
    // 清空编辑器
    // const clear = (instance) => {
    //   instance.text.clear()
    // }

    let instance
    onMounted(() => {
      createEditor()
      watchEffect(() => {
        // 初始载入内容
        if (instance.txt.html() === '') instance.txt.html(props.modelValue)
      })
      // 得到config配置初始化及表单设计渲染
      watch(() => props.config, () => {
        // 重新渲染修改过config配置的editor，待优化
        createEditor()
        // 初始载入内容
        if (instance.txt.html() === '') instance.txt.html(props.modelValue)
      }, { deep: true })
    })
    const createEditor = () => {
      if (instance) instance.destroy()
      instance = new WangEditor(editor.value)
      Object.assign(instance.config, clearEmptyKey({
        height: height.value,
        menus: menus.value,
        colors: colors.value,
        fontNames: fontNames.value,
        fontSizes: fontSizes.value,
        emotions: emotions.value,
        showFullScreen: showFullScreen.value,
        showMenuTooltips: showMenuTooltips.value,
        menuTooltipPosition: menuTooltipPosition.value,
        pasteFilterStyle: pasteFilterStyle.value,
        pasteIgnoreImg: pasteIgnoreImg.value,
        customUploadImg: customUploadImg.value,
        placeholder: placeholder.value,
        focus: false,
        zIndex: 0
      }), {
        onchange (val) {
          emitInput(val)
        }
      })
      instance.create()
    }

    onBeforeUnmount(() => {
      destroyInstance()
    })
    const destroyInstance = () => {
      instance.destroy()
      instance = null
    }

    return () => (
      <div ref={editor} style="width:100%" />
    )
  }
}