From d9f41e563e188e1b16c2fec1443c100b9a5583cc Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 29 May 2025 16:59:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增 CustomEditor.vue 组件，提供富文本编辑功能，支持@提及、表情、图片和文件上传
2. 优化消息处理逻辑，增加空值检查和错误处理
3. 替换 PanelFooter.vue 中的默认编辑器为自定义编辑器
4. 更新 util.ts 和 talk.ts 中的相关逻辑，增强健壮性

自定义编辑器实现了更丰富的交互功能，包括：
- 支持@提及用户并显示选择列表
- 支持插入表情符号和图片
- 优化文件上传处理流程
- 增强粘贴和键盘事件处理
---
 src/components/editor/CustomEditor.vue        | 1078 +++++++++++++++++
 src/components/editor/util.ts                 |    2 +-
 src/store/modules/talk.ts                     |    6 +-
 src/utils/auth.js                             |    2 +-
 src/views/message/inner/panel/PanelFooter.vue |   10 +-
 5 files changed, 1091 insertions(+), 7 deletions(-)
 create mode 100644 src/components/editor/CustomEditor.vue

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
new file mode 100644
index 0000000..1cb657b
--- /dev/null
+++ b/src/components/editor/CustomEditor.vue
@@ -0,0 +1,1078 @@
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, markRaw } from 'vue'
+import { NPopover, NIcon } from 'naive-ui'
+import {
+  SmilingFace,
+  Pic,
+  FolderUpload
+} from '@icon-park/vue-next'
+import { bus } from '@/utils/event-bus'
+import { EditorConst } from '@/constant/event-bus'
+import { emitCall } from '@/utils/common'
+import { deltaToMessage, deltaToString, isEmptyDelta } from './util'
+import { useDialogueStore, useEditorDraftStore } from '@/store'
+import { uploadImg } from '@/api/upload'
+import { defAvatar } from '@/constant/default'
+import { getImageInfo } from '@/utils/functions'
+import MeEditorEmoticon from './MeEditorEmoticon.vue'
+
+const props = defineProps({
+  vote: {
+    type: Boolean,
+    default: false
+  },
+  members: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['editor-event'])
+
+// 响应式数据
+const editorRef = ref(null)
+const content = ref('')
+const isFocused = ref(false)
+const showMention = ref(false)
+const mentionQuery = ref('')
+const mentionPosition = ref({ top: 0, left: 0 })
+const selectedMentionIndex = ref(0)
+const quoteData = ref(null)
+const editingMessage = ref(null)
+const isShowEmoticon = ref(false)
+
+const fileImageRef = ref(null)
+const uploadFileRef = ref(null)
+const emoticonRef = ref(null)
+
+// 获取状态管理
+const dialogueStore = useDialogueStore()
+const editorDraftStore = useEditorDraftStore()
+
+// 工具栏配置
+const navs = reactive([
+  {
+    title: '图片',
+    icon: markRaw(Pic),
+    show: true,
+    click: () => {
+      fileImageRef.value.click()
+    }
+  },
+  {
+    title: '文件',
+    icon: markRaw(FolderUpload),
+    show: true,
+    click: () => {
+      uploadFileRef.value.click()
+    }
+  }
+])
+
+const mentionList = ref([])
+const currentMentionQuery = ref('')
+
+// 编辑器内容
+const editorContent = ref('')
+const editorHtml = ref('')
+
+// 工具栏配置
+const toolbarConfig = computed(() => {
+  const config = [
+    { type: 'emoticon', icon: 'icon-biaoqing', title: '表情' },
+    { type: 'image', icon: 'icon-image', title: '图片' },
+    { type: 'file', icon: 'icon-folder-plus', title: '文件' }
+  ]
+  
+  return config
+})
+
+// 处理输入事件
+const handleInput = (event) => {
+  const target = event.target
+  editorContent.value = target.textContent || ''
+  editorHtml.value = target.innerHTML || ''
+  
+  // 检查@mention
+  checkMention(target)
+  
+  // 发送输入事件
+  emit('editor-event', {
+    event: 'input_event',
+    data: editorContent.value
+  })
+}
+
+// 检查@mention
+const checkMention = (target) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const textBeforeCursor = range.startContainer.textContent?.substring(0, range.startOffset) || ''
+  const mentionMatch = textBeforeCursor.match(/@([^@\s]*)$/)
+  
+  if (mentionMatch) {
+    currentMentionQuery.value = mentionMatch[1]
+    showMentionList()
+    updateMentionPosition(range)
+  } else {
+    hideMentionList()
+  }
+}
+
+// 显示mention列表
+const showMentionList = () => {
+  const query = currentMentionQuery.value.toLowerCase()
+  mentionList.value = props.members.filter(member => 
+    member.nickname.toLowerCase().includes(query)
+  ).slice(0, 10)
+  
+  showMention.value = mentionList.value.length > 0
+  selectedMentionIndex.value = 0
+}
+
+// 隐藏mention列表
+const hideMentionList = () => {
+  showMention.value = false
+  mentionList.value = []
+  currentMentionQuery.value = ''
+}
+
+// 更新mention位置
+const updateMentionPosition = (range) => {
+  const rect = range.getBoundingClientRect()
+  const editorRect = editorRef.value.getBoundingClientRect()
+  
+  mentionPosition.value = {
+    top: rect.bottom - editorRect.top + 5,
+    left: rect.left - editorRect.left
+  }
+}
+
+// 插入mention
+const insertMention = (member) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const textNode = range.startContainer
+  const offset = range.startOffset
+  
+  // 找到@符号的位置
+  const textContent = textNode.textContent || ''
+  const atIndex = textContent.lastIndexOf('@', offset - 1)
+  
+  if (atIndex !== -1) {
+    // 创建mention元素
+    const mentionSpan = document.createElement('span')
+    mentionSpan.className = 'mention'
+    mentionSpan.setAttribute('data-user-id', member.user_id)
+    mentionSpan.textContent = `@${member.nickname}`
+    mentionSpan.contentEditable = 'false'
+    
+    // 替换文本
+    const beforeText = textContent.substring(0, atIndex)
+    const afterText = textContent.substring(offset)
+    
+    // 创建新的文本节点
+    const beforeNode = document.createTextNode(beforeText)
+    const afterNode = document.createTextNode(' ' + afterText)
+    
+    // 替换内容
+    const parent = textNode.parentNode
+    parent.insertBefore(beforeNode, textNode)
+    parent.insertBefore(mentionSpan, textNode)
+    parent.insertBefore(afterNode, textNode)
+    parent.removeChild(textNode)
+    
+    // 设置光标位置
+    const newRange = document.createRange()
+    newRange.setStartAfter(mentionSpan)
+    newRange.collapse(true)
+    selection.removeAllRanges()
+    selection.addRange(newRange)
+  }
+  
+  hideMentionList()
+  editorRef.value.focus()
+}
+
+// 处理粘贴事件
+const handlePaste = (event) => {
+  event.preventDefault()
+  
+  // 获取粘贴的纯文本内容
+  const text = event.clipboardData?.getData('text/plain') || ''
+  
+  if (text) {
+    // 插入纯文本，移除所有样式
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      range.deleteContents()
+      range.insertNode(document.createTextNode(text))
+      range.collapse(false)
+      selection.removeAllRanges()
+      selection.addRange(range)
+      
+      // 触发输入事件
+      handleInput({ target: editorRef.value })
+    }
+  }
+}
+
+// 处理键盘事件
+const handleKeydown = (event) => {
+  // 处理@提及列表的键盘导航
+  if (showMention.value) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault()
+        selectedMentionIndex.value = Math.max(0, selectedMentionIndex.value - 1)
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        selectedMentionIndex.value = Math.min(mentionList.value.length - 1, selectedMentionIndex.value + 1)
+        break
+      case 'Enter':
+      case 'Tab':
+        event.preventDefault()
+        if (mentionList.value[selectedMentionIndex.value]) {
+          insertMention(mentionList.value[selectedMentionIndex.value])
+        }
+        break
+      case 'Escape':
+        hideMentionList()
+        break
+    }
+    return
+  }
+  
+  // 处理Enter键发送消息
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    // 确保编辑器内容不为空
+    if (editorContent.value.trim() || editorHtml.value.includes('<img') || editorHtml.value.includes('editor-file')) {
+      sendMessage()
+    }
+  }
+}
+
+// 发送消息
+const sendMessage = () => {
+  // 检查编辑器是否有内容：文本、图片
+  if (!editorContent.value.trim() && !editorHtml.value.includes('<img') && !editorHtml.value.includes('editor-file')) {
+    return
+  }
+  
+  const messageData = parseEditorContent()
+  
+  if (editingMessage.value) {
+    // 编辑消息
+    emit('editor-event', {
+      event: 'edit_message',
+      data: {
+        ...messageData,
+        msg_id: editingMessage.value.msg_id
+      },
+      callBack: (success) => {
+        if (success) {
+          clearEditor()
+          editingMessage.value = null
+        }
+      }
+    })
+  } else {
+    // 发送新消息
+    const eventType = messageData.items.length > 1 ? 'mixed_event' : 
+                     messageData.items[0].type === 'text' ? 'text_event' : 
+                     messageData.items[0].type + '_event'
+    
+    emit('editor-event', {
+      event: eventType,
+      data: messageData,
+      callBack: (success) => {
+        if (success) {
+          clearEditor()
+        }
+      }
+    })
+  }
+}
+
+// 解析编辑器内容
+const parseEditorContent = () => {
+  const items = []
+  const mentionUids = []
+  
+  // 解析HTML内容
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = editorHtml.value
+  
+  let textContent = ''
+  const nodes = Array.from(tempDiv.childNodes)
+  
+  nodes.forEach(node => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      textContent += node.textContent
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.classList.contains('mention')) {
+        const userId = node.getAttribute('data-user-id')
+        if (userId) {
+          mentionUids.push(parseInt(userId))
+        }
+        textContent += node.textContent
+      } else if (node.tagName === 'IMG') {
+        // 处理图片
+        const src = node.getAttribute('src')
+        const width = node.getAttribute('width') || ''
+        const height = node.getAttribute('height') || ''
+        
+        if (textContent.trim()) {
+          items.push({
+            type: 'text',
+            content: textContent.trim()
+          })
+          textContent = ''
+        }
+        
+        items.push({
+          type: 'image',
+          content: src + (width && height ? `?width=${width}&height=${height}` : '')
+        })
+      } else if (node.classList.contains('emoji')) {
+        textContent += node.getAttribute('alt') || node.textContent
+      } else if (node.classList.contains('editor-file')) {
+        // 处理文件
+        const fileUrl = node.getAttribute('data-url')
+        const fileName = node.getAttribute('data-name')
+        const fileSize = node.getAttribute('data-size')
+        
+        if (textContent.trim()) {
+          items.push({
+            type: 'text',
+            content: textContent.trim()
+          })
+          textContent = ''
+        }
+        
+        if (fileUrl && fileName) {
+          items.push({
+            type: 'file',
+            content: fileUrl,
+            name: fileName,
+            size: node.getAttribute('data-size-raw') || fileSize || 0
+          })
+        }
+      } else {
+        textContent += node.textContent
+      }
+    }
+  })
+  
+  if (textContent.trim()) {
+    items.push({
+      type: 'text',
+      content: textContent.trim()
+    })
+  }
+  
+  return {
+    items: items.length > 0 ? items : [{ type: 'text', content: '' }],
+    mentionUids,
+    quoteId: quoteData.value?.msg_id || 0
+  }
+}
+
+// 清空编辑器
+const clearEditor = () => {
+  editorContent.value = ''
+  editorHtml.value = ''
+  if (editorRef.value) {
+    editorRef.value.innerHTML = ''
+  }
+  quoteData.value = null
+  hideMentionList()
+}
+
+
+
+// 插入图片
+const insertImage = (url, width, height) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const img = document.createElement('img')
+  img.src = url
+  img.style.maxWidth = '200px'
+  img.style.maxHeight = '200px'
+  if (width) img.setAttribute('width', width)
+  if (height) img.setAttribute('height', height)
+  
+  range.deleteContents()
+  range.insertNode(img)
+  range.setStartAfter(img)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+  
+  editorRef.value.focus()
+  handleInput({ target: editorRef.value })
+}
+
+// 插入文件
+const insertFile = (url, fileName, fileSize) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  
+  // 创建文件链接元素
+  const fileLink = document.createElement('a')
+  fileLink.href = url
+  fileLink.target = '_blank'
+  fileLink.className = 'editor-file'
+  fileLink.textContent = fileName
+  fileLink.setAttribute('data-size', formatFileSize(fileSize))
+  fileLink.setAttribute('data-url', url) // 添加URL属性用于解析
+  fileLink.setAttribute('data-name', fileName) // 添加文件名属性用于解析
+  fileLink.setAttribute('data-size-raw', fileSize) // 添加原始文件大小属性用于解析
+  
+  range.deleteContents()
+  range.insertNode(fileLink)
+  range.setStartAfter(fileLink)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+  
+  editorRef.value.focus()
+  handleInput({ target: editorRef.value })
+}
+
+// 格式化文件大小
+const formatFileSize = (size) => {
+  if (size < 1024) {
+    return size + ' B'
+  } else if (size < 1024 * 1024) {
+    return (size / 1024).toFixed(2) + ' KB'
+  } else if (size < 1024 * 1024 * 1024) {
+    return (size / (1024 * 1024)).toFixed(2) + ' MB'
+  } else {
+    return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
+  }
+}
+
+// 文件上传处理
+const onUploadFile = async (event) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    formData.append('source', 'fonchain-chat')
+
+    if (file.type.startsWith('image/')) {
+      // 图片上传
+      const image = new Image()
+      image.src = URL.createObjectURL(file)
+      image.onload = async () => {
+        formData.append('urlParam', `width=${image.width}&height=${image.height}`)
+        const { code, data } = await uploadImg(formData)
+        if (code === 0) {
+          insertImage(data.ori_url, image.width, image.height)
+        }
+      }
+    } else {
+      // 文件上传
+      const { code, data } = await uploadImg(formData)
+      if (code === 0) {
+        // 直接发送文件消息，而不是插入到编辑器中
+        emit('editor-event', {
+          event: 'file_event',
+          data: {
+            items: [{
+              type: 'file',
+              content: data.ori_url,
+              name: file.name,
+              size: file.size
+            }],
+            mentionUids: [],
+            quoteId: quoteData.value?.msg_id || 0
+          },
+          callBack: (success) => {
+            if (success) {
+              // 如果需要，可以在这里清空编辑器
+              // clearEditor()
+            }
+          }
+        })
+      }
+    }
+  } catch (error) {
+    console.error('文件上传失败:', error)
+  }
+
+  // 清空文件输入
+  event.target.value = ''
+}
+
+// 表情选择事件
+const onEmoticonEvent = (emoji) => {
+  // 关闭表情面板
+  emoticonRef.value?.setShow(false)
+  
+  // 处理不同类型的表情
+  if (emoji.type === 'text') {
+    // 文本表情
+    insertTextEmoji(emoji.value)
+  } else if (emoji.type === 'image') {
+    // 图片表情
+    insertImageEmoji(emoji.img, emoji.value)
+  } else if (emoji.type === 'emoji') {
+    // 系统表情
+    insertTextEmoji(emoji.value)
+  } else if (emoji.type === 1) {
+    // 兼容旧版表情格式
+    if (emoji.img) {
+      insertImageEmoji(emoji.img, emoji.value)
+    } else {
+      insertTextEmoji(emoji.value)
+    }
+  } else {
+    // 发送整个表情包
+    emit('editor-event', {
+      event: 'emoticon_event',
+      data: emoji.value || emoji.id,
+      callBack: () => {}
+    })
+  }
+}
+
+// 插入文本表情
+const insertTextEmoji = (emojiText) => {
+  const editor = editorRef.value
+  if (!editor) return
+
+  editor.focus()
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+
+  const range = selection.getRangeAt(0)
+  range.deleteContents()
+
+  const textNode = document.createTextNode(emojiText)
+  range.insertNode(textNode)
+
+  // 移动光标到插入文本之后
+  range.setStartAfter(textNode)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  // 触发输入事件以更新编辑器内容
+  handleInput({ target: editor })
+}
+
+// 插入图片表情
+const insertImageEmoji = (imgSrc, altText) => {
+  const editor = editorRef.value
+  if (!editor) return
+
+  editor.focus()
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+
+  const range = selection.getRangeAt(0)
+  range.deleteContents()
+
+  const img = document.createElement('img')
+  img.src = imgSrc
+  img.alt = altText
+  img.className = 'editor-emoji' // 使用已有的样式
+  // img.style.width = '24px' // 样式已在 .editor-emoji 中定义
+  // img.style.height = '24px'
+  // img.style.verticalAlign = 'middle'
+
+  range.insertNode(img)
+
+  // 移动光标到插入图片之后
+  range.setStartAfter(img)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  // 触发输入事件以更新编辑器内容
+  handleInput({ target: editor })
+}
+
+
+
+// 图片上传
+const onImageUpload = async (event) => {
+  const files = event.target.files
+  if (!files || files.length === 0) return
+  
+  const file = files[0]
+  if (!file.type.startsWith('image/')) {
+    window['$message'].warning('请选择图片文件')
+    return
+  }
+  
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    const response = await ServeUploadImage(formData)
+    if (response.code === 200) {
+      // 获取图片尺寸
+      const img = new Image()
+      img.onload = () => {
+        insertImage(response.data.url, img.width, img.height)
+      }
+      img.src = response.data.url
+    }
+  } catch (error) {
+    window['$message'].error('图片上传失败')
+  }
+  
+  event.target.value = ''
+}
+
+// 文件上传
+const onFileUpload = (event) => {
+  const files = event.target.files
+  if (!files || files.length === 0) return
+  
+  const file = files[0]
+  emit('editor-event', {
+    event: 'file_event',
+    data: file
+  })
+  
+  event.target.value = ''
+}
+
+// 事件监听
+const onSubscribeMention = (data) => {
+  insertMention(data)
+}
+
+const onSubscribeQuote = (data) => {
+  quoteData.value = data
+}
+
+const onSubscribeEdit = (data) => {
+  editingMessage.value = data
+  clearEditor()
+  
+  // 插入编辑内容
+  if (data.content) {
+    editorRef.value.innerHTML = data.content
+    editorContent.value = data.content
+    editorHtml.value = data.content
+  }
+}
+
+// 组件挂载
+onMounted(() => {
+  bus.subscribe('mention', onSubscribeMention)
+  bus.subscribe('quote', onSubscribeQuote)
+  bus.subscribe('edit', onSubscribeEdit)
+  
+  // 点击外部隐藏mention
+  document.addEventListener('click', (event) => {
+    if (!editorRef.value?.contains(event.target)) {
+      hideMentionList()
+    }
+  })
+})
+
+// 组件卸载
+onBeforeUnmount(() => {
+  bus.unsubscribe('mention', onSubscribeMention)
+  bus.unsubscribe('quote', onSubscribeQuote)
+  bus.unsubscribe('edit', onSubscribeEdit)
+})
+
+// 表情选择
+const onEmoticonSelect = (emoji) => {
+  // 直接调用onEmoticonEvent处理表情
+  onEmoticonEvent(emoji)
+  isShowEmoticon.value = false
+}
+
+// 代码块
+const onCodeSubmit = (data) => {
+  emit('editor-event', {
+    event: 'code_event',
+    data,
+    callBack: () => {}
+  })
+  isShowCode.value = false
+}
+
+// 投票
+const onVoteSubmit = (data) => {
+  emit('editor-event', {
+    event: 'vote_event',
+    data,
+    callBack: () => {}
+  })
+  isShowVote.value = false
+}
+
+// 录音
+const onRecorderFinish = (data) => {
+  emit('editor-event', {
+    event: 'file_event',
+    data
+  })
+  isShowRecorder.value = false
+}
+</script>
+
+<template>
+  <section class="el-container editor">
+    <section class="el-container is-vertical">
+      <!-- 工具栏区域 -->
+      <header class="el-header toolbar bdr-t">
+        <div class="tools">
+          <!-- 表情选择器弹出框 -->
+          <n-popover
+            placement="top-start"
+            trigger="click"
+            raw
+            :show-arrow="false"
+            :width="300"
+            ref="emoticonRef"
+            style="width: 500px; height: 250px; border-radius: 10px; overflow: hidden"
+          >
+            <template #trigger>
+              <div class="item pointer">
+                <n-icon size="18" class="icon" :component="SmilingFace" />
+                <p class="tip-title">表情符号</p>
+              </div>
+            </template>
+
+            <MeEditorEmoticon @on-select="onEmoticonEvent" />
+          </n-popover>
+
+          <!-- 工具栏其他功能按钮 -->
+          <div
+            class="item pointer"
+            v-for="nav in navs"
+            :key="nav.title"
+            v-show="nav.show"
+            @click="nav.click"
+          >
+            <n-icon size="18" class="icon" :component="nav.icon" />
+            <p class="tip-title">{{ nav.title }}</p>
+          </div>
+        </div>
+      </header>
+
+      <!-- 编辑器主体区域 -->
+      <main class="el-main height100">
+        <div
+          ref="editorRef"
+          class="custom-editor"
+          contenteditable="true"
+          :placeholder="placeholder"
+          @input="handleInput"
+          @keydown="handleKeydown"
+          @paste="handlePaste"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        ></div>
+
+        <!-- @提及列表 -->
+        <div
+          v-if="showMention"
+          class="mention-list"
+          :style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }"
+        >
+          <ul>
+            <li
+              v-for="(member, index) in mentionList"
+              :key="member.user_id"
+              :class="{ selected: index === selectedMentionIndex }"
+              @mousedown.prevent="insertMention(member)"
+            >
+              {{ member.nickname }}
+            </li>
+          </ul>
+        </div>
+      </main>
+    </section>
+  </section>
+
+  <!-- 隐藏的文件上传表单 -->
+  <form enctype="multipart/form-data" style="display: none">
+    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
+    <input type="file" ref="uploadFileRef" @change="onUploadFile" />
+  </form>
+
+
+</template>
+
+<style lang="less" scoped>
+.editor {
+  --tip-bg-color: rgb(241 241 241 / 90%);
+  height: 100%;
+
+  .toolbar {
+    height: 38px;
+    display: flex;
+
+    .tools {
+      height: 100%;
+      flex: auto;
+      display: flex;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 35px;
+        margin: 0 2px;
+        position: relative;
+        user-select: none;
+
+        .tip-title {
+          display: none;
+          position: absolute;
+          top: 40px;
+          left: 0px;
+          line-height: 26px;
+          background-color: var(--tip-bg-color);
+          color: var(--im-text-color);
+          min-width: 20px;
+          font-size: 12px;
+          padding: 0 5px;
+          border-radius: 2px;
+          white-space: pre;
+          user-select: none;
+          z-index: 999999999999;
+        }
+
+        &:hover {
+          .tip-title {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  
+  // 文件链接样式
+  :deep(.editor-file) {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 5px 0;
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    color: #2196f3;
+    text-decoration: none;
+    position: relative;
+    padding-right: 60px;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    &::after {
+      content: attr(data-size);
+      position: absolute;
+      right: 10px;
+      color: #757575;
+      font-size: 12px;
+    }
+    
+    &:hover {
+      background-color: #e3f2fd;
+    }
+  }
+  
+  // 表情符号样式
+  :deep(.editor-emoji) {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+    margin: 0 2px;
+  }
+
+  .custom-editor {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    border: none;
+    outline: none;
+    resize: none;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    background: transparent;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 3px;
+      height: 3px;
+      background-color: unset;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background-color: transparent;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--im-scrollbar-thumb);
+      }
+    }
+  }
+
+  .custom-editor:empty::before {
+    content: attr(placeholder);
+    color: #999;
+    pointer-events: none;
+    font-family: PingFang SC, Microsoft YaHei, 'Alibaba PuHuiTi 2.0 45' !important;
+  }
+
+  .custom-editor:focus {
+    outline: none;
+  }
+
+  /* Mention 样式 */
+  .mention {
+    color: #1890ff;
+    background-color: #e6f7ff;
+    padding: 2px 4px;
+    border-radius: 3px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .mention:hover {
+    background-color: #bae7ff;
+  }
+
+  /* 图片样式 */
+  .editor-image {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 3px;
+    background-color: #48484d;
+    margin: 0px 2px;
+    cursor: pointer;
+  }
+
+  /* 表情样式 */
+  .editor-emoji {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin: 0 2px;
+  }
+
+  /* @提及列表样式 */
+  .mention-list {
+    position: absolute;
+    background-color: white;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      padding: 8px 12px;
+      cursor: pointer;
+      font-size: 14px;
+
+      &:hover,
+      &.selected {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  /* 引用卡片样式 */
+  .quote-card {
+    background: #f5f5f5;
+    border-left: 3px solid #1890ff;
+    padding: 8px 12px;
+    margin: 8px 0;
+    border-radius: 4px;
+    position: relative;
+  }
+
+  .quote-content {
+    font-size: 12px;
+  }
+
+  .quote-title {
+    font-weight: bold;
+    color: #1890ff;
+    margin-bottom: 4px;
+  }
+
+  .quote-text {
+    color: #666;
+    line-height: 1.4;
+  }
+
+  .quote-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #999;
+    font-size: 12px;
+  }
+
+  /* 编辑提示样式 */
+  .edit-tip {
+    background: #fff7e6;
+    border: 1px solid #ffd591;
+    padding: 6px 12px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #d46b08;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .edit-tip button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #d46b08;
+    margin-left: auto;
+  }
+}
+
+/* 暗色模式样式调整 */
+html[theme-mode='dark'] {
+  .editor {
+    --tip-bg-color: #48484d;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editor/util.ts b/src/components/editor/util.ts
index bb569b4..f07b17a 100644
--- a/src/components/editor/util.ts
+++ b/src/components/editor/util.ts
@@ -103,7 +103,7 @@ export function deltaToMessage(delta: Delta): AnalysisResp {
     }
 
     if (insert && insert.quote) {
-      resp.quoteId = insert.quote.id
+      resp.quoteId = insert.quote.id||''
       continue
     }
   }
diff --git a/src/store/modules/talk.ts b/src/store/modules/talk.ts
index c2feae8..71dd551 100644
--- a/src/store/modules/talk.ts
+++ b/src/store/modules/talk.ts
@@ -99,7 +99,11 @@ export const useTalkStore = defineStore('talk', {
 
             const draft = useEditorDraftStore().items[value.index_name]
             if (draft) {
-              value.draft_text = JSON.parse(draft).text || ''
+              try {
+                value.draft_text = JSON.parse(draft).text || ''
+              } catch (e) {
+                value.draft_text = draft
+              }
             }
 
             if (value.is_robot == 1) {
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 9a5803a..4ee6d5e 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d227de310c4e6f5d7ff11a9e1ea73aba3f6c749f75a50a2aeaed07b14bc0d8b1db6428caf891f0a0b0c84a49697f4a4e7c8b87d972340ecbf02ddbc4d4f1e51b057c822f8351524e19d52a3ec5ce8c83e2f'
+  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22cfdbfc3bc1d58c0fc81df3825ac0a76436ffc05a48efbb059bc6ec71c3405b3d02bbfd64af6e95f2d65bb8e21b5f94aa2de31ba7d103d900afbe3c668a78f089238c92090ce94a0cbf04aeda28ec697d'
 }
 
 /**
diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue
index a8e5c52..25cf2d5 100644
--- a/src/views/message/inner/panel/PanelFooter.vue
+++ b/src/views/message/inner/panel/PanelFooter.vue
@@ -12,7 +12,8 @@ import ws from '@/connect'
 import { ServePublishMessage, ServeSendVote } from '@/api/chat'
 import { throttle, getVideoImage } from '@/utils/common'
 import { parseTime } from '@/utils/datetime'
-import Editor from '@/components/editor/Editor.vue'
+// import Editor from '@/components/editor/Editor.vue'
+import CustomEditor from '@/components/editor/CustomEditor.vue'
 import MultiSelectFooter from './MultiSelectFooter.vue'
 import HistoryRecord from '@/components/talk/HistoryRecord.vue'
 import {scrollToBottom} from '@/utils/dom.ts'
@@ -80,7 +81,7 @@ const onSendTextEvent = throttle((value: any) => {
   let message = {
     type: 'text',
     content: data.items[0].content,
-    quote_id: data.quoteId,
+    quote_id: data.quoteId ||'',
     mentions: data.mentionUids
   }
 
@@ -233,7 +234,7 @@ const onSendEmoticonEvent = ({ data, callBack }) => {
 const onSendMixedEvent = ({ data, callBack }) => {
   let message = {
     type: 'mixed',
-    quote_id: data.quoteId,
+    quote_id: data.quoteId ||'',
     items: data.items
   }
 
@@ -291,7 +292,8 @@ onMounted(() => {
   <footer class="el-footer">
     <MultiSelectFooter v-if="dialogueStore.isOpenMultiSelect" />
 
-    <Editor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" />
+    <!-- <Editor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" /> -->
+    <CustomEditor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" />
   </footer>
 
   <HistoryRecord