feat(custom): 增加游戏大厅

src/components/Editor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="_ref" style="border: 1px solid #ccc">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      mode="default"
+    />
+    <Editor
+      v-model="htmlValue"
+      :style="{ height: height + 'px', overflowY: 'hidden' }"
+      :default-config="editorConfig"
+      mode="default"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, shallowRef, ref } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import api from '@/api'
+
+const props = defineProps({
+  valueHtml: {
+    type: String,
+    default: '',
+  },
+  height: {
+    type: Number,
+    default: 500,
+  },
+})
+
+const emit = defineEmits(['update:valueHtml'])
+
+const editorRef = shallowRef()
+
+const _ref = ref(null)
+
+const toolbarConfig = {}
+
+const editorConfig = { placeholder: '请输入游戏介绍...', MENU_CONF: {} }
+
+const htmlValue = computed({
+  get() {
+    return props.valueHtml
+  },
+  set(value) {
+    emit('update:valueHtml', value)
+  },
+})
+
+editorConfig.MENU_CONF['uploadImage'] = {
+  allowedFileTypes: ['image/*'],
+  base64LimitSize: 5 * 1024, // 5kb
+  // 超时时间，默认为 10 秒
+  timeout: 5 * 1000, // 5 秒
+
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
+  },
+}
+
+editorConfig.MENU_CONF['uploadVideo'] = {
+  allowedFileTypes: ['video/*'],
+
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
+  },
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+  editor.on('fullScreen', () => {
+    _ref.value.style.zIndex = 10
+  })
+}
+
+const upFile = async (file, insertFn) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  const res = await api.uploadImg(formData)
+  insertFn(res.data.data)
+}
+</script>
+
+<style lang="scss" scoped></style>