From 6382683f91dcbeb3cad3293f9be5ec6705f457b3 Mon Sep 17 00:00:00 2001 From: Liuweiqing <121866954+14790897@users.noreply.github.com> Date: Tue, 23 Jan 2024 12:10:03 +0800 Subject: [PATCH] fix: editorcontent to redux --- app/store/index.ts | 2 +- app/store/slices/authSlice.ts | 6 ++++++ components/QuillEditor.tsx | 24 +++++++++++++++++------- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/app/store/index.ts b/app/store/index.ts index 63a9fd9..95ac064 100644 --- a/app/store/index.ts +++ b/app/store/index.ts @@ -9,7 +9,7 @@ import logger from "redux-logger"; const authPersistConfig = { key: "chatapi", storage: storage, - whitelist: ["apiKey", "referencesRedux"], + whitelist: ["apiKey", "referencesRedux", "editorContent"], }; const rootReducer = combineReducers({ diff --git a/app/store/slices/authSlice.ts b/app/store/slices/authSlice.ts index 745774f..86943fc 100644 --- a/app/store/slices/authSlice.ts +++ b/app/store/slices/authSlice.ts @@ -3,11 +3,13 @@ import { Reference } from "@/utils/global"; export interface APIState { apiKey: string; referencesRedux: Reference[]; + editorContent: string; } const initialState: APIState = { apiKey: "", referencesRedux: [], + editorContent: "", }; export const authSlice = createSlice({ @@ -31,6 +33,9 @@ export const authSlice = createSlice({ clearReferencesRedux: (state) => { state.referencesRedux = []; }, + setEditorContent: (state, action: PayloadAction) => { + state.editorContent = action.payload; + }, }, }); @@ -41,6 +46,7 @@ export const { addReferencesRedux, removeReferenceRedux, clearReferencesRedux, + setEditorContent, } = authSlice.actions; export const authReducer = authSlice.reducer; diff --git a/components/QuillEditor.tsx b/components/QuillEditor.tsx index 5326178..4b15403 100644 --- a/components/QuillEditor.tsx +++ b/components/QuillEditor.tsx @@ -19,7 +19,10 @@ import { import ReferenceList from "./ReferenceList"; //redux import { useAppDispatch, useAppSelector } from "@/app/store"; -import { addReferencesRedux } from "@/app/store/slices/authSlice"; +import { + addReferencesRedux, + setEditorContent, +} from "@/app/store/slices/authSlice"; //类型声明 import { Reference } from "@/utils/global"; @@ -71,6 +74,7 @@ const QEditor = () => { //redux const dispatch = useAppDispatch(); const references = useAppSelector((state) => state.auth.referencesRedux); + const editorContent = useAppSelector((state) => state.auth.editorContent); // 从 Redux store 中获取编辑器内容 const addReference = (newReference: Reference) => { setReferences((prevReferences) => [...prevReferences, newReference]); @@ -91,10 +95,14 @@ const QEditor = () => { theme: "snow", }); // 检查 localStorage 中是否有保存的内容 - const savedContent = localStorage.getItem("quillContent"); - if (savedContent) { - // 设置编辑器的内容 - editor.current.root.innerHTML = savedContent; + // const savedContent = localStorage.getItem("quillContent"); + // if (savedContent) { + // // 设置编辑器的内容 + // editor.current.root.innerHTML = savedContent; + // } + // 设置编辑器的内容 + if (editorContent) { + editor.current.root.innerHTML = editorContent; } isMounted.current = true; @@ -121,14 +129,16 @@ const QEditor = () => { const content = quill.root.innerHTML; // 或 quill.getText(),或 quill.getContents() // 保存到 localStorage - localStorage.setItem("quillContent", content); + // localStorage.setItem("quillContent", content); + dispatch(setEditorContent(content)); // 更新 Redux store + setTimeout(() => { convertToSuperscript(quill); }, 0); // 延迟 0 毫秒,即将函数放入事件队列的下一个循环中执行,不然就会因为在改变文字触发整个函数时修改文本内容造成无法找到光标位置 } }); } - }, [quill]); + }, [quill, dispatch]); // 处理用户输入变化 const handleInputChange = (event) => {