wip: 重构中

src/components/Editor/index.vue

@@ -1,145 +0,0 @@
-<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:modelValue'],
-  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, props.valueType === 'html' ? html : text, 'change')
-        // emit('update:modelValue', 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)
-    }
-
-    function getHtml() {
-      if (editor.value) {
-        return unref(editor.value as any).txt.html()
-      }
-    }
-
-    function getText() {
-      if (editor.value) {
-        return unref(editor.value as any).txt.text()
-      }
-    }
-
-    return {
-      editorRef,
-      getHtml, getText
-    }
-  }
-})
-</script>
-
-<style>
-</style>

src/components/Editor/props.ts

@@ -1,101 +0,0 @@
-import { PropType } from 'vue'
-import { Message } from '_c/Message'
-import { oneOf } from '@/utils'
-
-import { Config } from './types'
-
-export const editorProps = {
-  // 基础配置
-  config: {
-    type: Object as PropType<Config>,
-    default: () => {
-      return {
-        height: 500,
-        zIndex: 0,
-        placeholder: '请输入文本',
-        focus: false,
-        onchangeTimeout: 1000,
-        customAlert: (s: string, t: string) => {
-          switch (t) {
-          case 'success':
-            Message.success(s)
-            break
-          case 'info':
-            Message.info(s)
-            break
-          case 'warning':
-            Message.warning(s)
-            break
-          case 'error':
-            Message.error(s)
-            break
-          default:
-            Message.info(s)
-            break
-          }
-        },
-        menus: [
-          'head',
-          'bold',
-          'fontSize',
-          'fontName',
-          'italic',
-          'underline',
-          'strikeThrough',
-          'indent',
-          'lineHeight',
-          'foreColor',
-          'backColor',
-          'link',
-          'list',
-          'justify',
-          'quote',
-          'emoticon',
-          'image',
-          'video',
-          'table',
-          'code',
-          'splitLine',
-          'undo',
-          'redo'
-        ],
-        colors: [
-          '#000000',
-          '#eeece0',
-          '#1c487f',
-          '#4d80bf'
-        ],
-        fontNames: [
-          '黑体',
-          '仿宋',
-          '楷体',
-          '标楷体',
-          '华文仿宋',
-          '华文楷体',
-          '宋体',
-          '微软雅黑',
-          'Arial',
-          'Tahoma',
-          'Verdana',
-          'Times New Roman',
-          'Courier New'
-        ],
-        lineHeights: ['1', '1.15', '1.6', '2', '2.5', '3'],
-        showFullScreen: true
-      }
-    }
-  },
-  // 绑定的值的类型, enum: ['html', 'text']
-  valueType: {
-    type: String as PropType<string>,
-    default: 'html',
-    validator: (val: string) => {
-      return oneOf(val, ['html', 'text'])
-    }
-  },
-  // 文本内容
-  value: {
-    type: String as PropType<string>,
-    default: ''
-  }
-}

src/components/Editor/types.ts

@@ -1,13 +0,0 @@
-export interface Config {
-  height: number
-  zIndex: number
-  placeholder: string
-  focus: boolean
-  customAlert: () => any
-  menus: string[]
-  colors: string[]
-  fontNames: string[]
-  lineHeights: string[]
-  showFullScreen: boolean
-  onchangeTimeout: number
-}