feat(custom): i

src/components/Editor.vue

@@ -0,0 +1,110 @@
+<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: 500px; overflow-y: 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 { getToken } from '@/utils'
+
+const props = defineProps({
+  valueHtml: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:valueHtml'])
+
+const editorRef = shallowRef()
+
+const _ref = ref(null)
+
+const Token = getToken()
+
+const toolbarConfig = {}
+
+const editorConfig = { placeholder: '请输入商品详情...', MENU_CONF: {} }
+
+const htmlValue = computed({
+  get() {
+    console.log('get', props.valueHtml)
+    return props.valueHtml
+  },
+  set(value) {
+    console.log('set', props.valueHtml)
+    emit('update:valueHtml', value)
+  },
+})
+
+editorConfig.MENU_CONF['uploadImage'] = {
+  // 其他配置...
+  // 小于该值就插入 base64 格式（而不上传），默认为 0
+  fieldName: 'file',
+  server: '/store/upload',
+  allowedFileTypes: ['image/*'],
+  headers: {
+    Authorization: `Bearer ${Token}`,
+  },
+  base64LimitSize: 5 * 1024, // 5kb
+  // 超时时间，默认为 10 秒
+  timeout: 5 * 1000, // 5 秒
+  // 自定义插入图片
+  customInsert(res, insertFn) {
+    if (res.code === 200) {
+      console.log(res)
+      $message.success('上传成功')
+      insertFn(res.data.data)
+    }
+  },
+}
+
+editorConfig.MENU_CONF['uploadVideo'] = {
+  server: '/store/upload',
+  fieldName: 'file',
+  allowedFileTypes: ['video/*'],
+  headers: {
+    Authorization: `Bearer ${Token}`,
+  },
+  // 单个文件上传成功之后
+  customInsert(res, insertFn) {
+    console.log(res)
+
+    // 如果成功了，就把视频的地址，插入到编辑器中
+    insertFn(res.data.data)
+  },
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  console.log('销毁')
+  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
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/Upload.vue

@@ -0,0 +1,67 @@
+<template>
+  <n-upload
+    v-model:file-list="List"
+    action="/store/upload"
+    :headers="headers"
+    :max="max"
+    list-type="image-card"
+    @before-upload="beforeUpload"
+    @finish="handleFinish"
+    @error="handleError"
+  >
+    点击上传
+  </n-upload>
+</template>
+
+<script setup>
+import { getToken } from '@/utils'
+
+const token = getToken()
+
+const prop = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  max: {
+    type: Number,
+    default: 1,
+  },
+})
+
+const emit = defineEmits(['update:list'])
+
+const headers = ref({
+  Authorization: `Bearer ${token}`,
+})
+
+const List = computed({
+  get() {
+    return prop.list
+  },
+  set(val) {
+    emit('update:list', val)
+  },
+})
+
+const handleFinish = ({ file, event }) => {
+  const res = JSON.parse(event.target.response)
+  file.url = res.data.data
+  return file
+}
+
+const handleError = () => {
+  $message.error('上传失败')
+}
+
+// 图片上传限制
+const beforeUpload = (data) => {
+  if (!(data.file.file?.type === 'image/png' || data.file.file?.type === 'image/jpeg')) {
+    $message.error('只能上传png或jpg格式的图片文件,请重新上传')
+    return false
+  }
+  return true
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/common/AppFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer f-c-c flex-col text-14 color="#6a6a6a">
-    <p>
+    <!-- <p>
       Copyright © 2022-present
       <a
         href="https://github.com/zclzone"
@@ -18,6 +18,6 @@
       >
         赣ICP备2020015008号-1
       </a>
-    </p>
+    </p> -->
   </footer>
 </template>