feat(editor): 添加自定义编辑器组件并优化消息处理

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

自定义编辑器实现了更丰富的交互功能,包括:
- 支持@提及用户并显示选择列表
- 支持插入表情符号和图片
- 优化文件上传处理流程
- 增强粘贴和键盘事件处理
This commit is contained in:
Phoenix 2025-05-29 16:59:59 +08:00
parent 2c1ae41c3e
commit d9f41e563e
5 changed files with 1091 additions and 7 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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
}
}

View File

@ -99,7 +99,11 @@ export const useTalkStore = defineStore('talk', {
const draft = useEditorDraftStore().items[value.index_name]
if (draft) {
try {
value.draft_text = JSON.parse(draft).text || ''
} catch (e) {
value.draft_text = draft
}
}
if (value.is_robot == 1) {

View File

@ -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'
}
/**

View File

@ -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