|
@@ -2,14 +2,20 @@ import React from 'react';
|
|
|
import { useCreateBlockNote } from '@blocknote/react';
|
|
import { useCreateBlockNote } from '@blocknote/react';
|
|
|
import { BlockNoteView } from '@blocknote/mantine';
|
|
import { BlockNoteView } from '@blocknote/mantine';
|
|
|
import { BlockNoteSchema, createHeadingBlockSpec } from "@blocknote/core";
|
|
import { BlockNoteSchema, createHeadingBlockSpec } from "@blocknote/core";
|
|
|
-import { zh } from "@blocknote/core/locales";
|
|
|
|
|
|
|
+import { zh, en } from "@blocknote/core/locales";
|
|
|
import '@blocknote/mantine/style.css';
|
|
import '@blocknote/mantine/style.css';
|
|
|
import '@blocknote/core/fonts/inter.css';
|
|
import '@blocknote/core/fonts/inter.css';
|
|
|
|
|
+import { uploadFile } from '@/api/common.js'
|
|
|
// 正确导入需要的组件
|
|
// 正确导入需要的组件
|
|
|
import { ColumnBlock, ColumnListBlock, withMultiColumn, multiColumnSchema} from "@blocknote/xl-multi-column"
|
|
import { ColumnBlock, ColumnListBlock, withMultiColumn, multiColumnSchema} from "@blocknote/xl-multi-column"
|
|
|
|
|
|
|
|
-const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) => {
|
|
|
|
|
|
|
+const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true, currentLang = 'zh' }) => {
|
|
|
let isEditable = editable;
|
|
let isEditable = editable;
|
|
|
|
|
+ //currentLang变化时重新创建editor实例
|
|
|
|
|
+ React.useEffect(() => {
|
|
|
|
|
+
|
|
|
|
|
+ }, [currentLang]);
|
|
|
|
|
+
|
|
|
// 创建带有多列支持的 schema
|
|
// 创建带有多列支持的 schema
|
|
|
// const schema = BlockNoteSchema.create({
|
|
// const schema = BlockNoteSchema.create({
|
|
|
// blockSpecs: {
|
|
// blockSpecs: {
|
|
@@ -31,8 +37,8 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
|
|
|
// // columnList: ColumnListBlock
|
|
// // columnList: ColumnListBlock
|
|
|
// }
|
|
// }
|
|
|
// }),
|
|
// }),
|
|
|
- id: 'blocknote-react-editor',
|
|
|
|
|
- dictionary: zh,
|
|
|
|
|
|
|
+ id: "blocknote-react-editor",
|
|
|
|
|
+ dictionary: currentLang === 'en' ? en : zh,
|
|
|
initialContent: modelValue || undefined,
|
|
initialContent: modelValue || undefined,
|
|
|
iseditable : false,
|
|
iseditable : false,
|
|
|
autofocus: false, // 默认 false,true 开启自动聚焦
|
|
autofocus: false, // 默认 false,true 开启自动聚焦
|
|
@@ -44,17 +50,15 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
|
|
|
// "image", // 图片
|
|
// "image", // 图片
|
|
|
// "quote", // 引用
|
|
// "quote", // 引用
|
|
|
// ],
|
|
// ],
|
|
|
- // uploadFile: async (file) => {
|
|
|
|
|
- // // 上传文件到服务器
|
|
|
|
|
- // const formData = new FormData();
|
|
|
|
|
- // formData.append('file', file);
|
|
|
|
|
- // const response = await fetch('/upload', {
|
|
|
|
|
- // method: 'POST',
|
|
|
|
|
- // body: formData,
|
|
|
|
|
- // });
|
|
|
|
|
- // const data = await response.json();
|
|
|
|
|
- // return data.url; // 返回图片 URL
|
|
|
|
|
- // },
|
|
|
|
|
|
|
+ uploadFile: async (file) => {
|
|
|
|
|
+ // 上传文件到服务器
|
|
|
|
|
+ const formData = new FormData();
|
|
|
|
|
+ formData.append('file', file);
|
|
|
|
|
+ const response = await uploadFile('/upload', formData);
|
|
|
|
|
+ console.log('上传响应:', response);
|
|
|
|
|
+ const data = await response.json();
|
|
|
|
|
+ return data.url; // 返回图片 URL
|
|
|
|
|
+ },
|
|
|
// placeholder: "请输入内容(支持块级编辑、格式设置)"
|
|
// placeholder: "请输入内容(支持块级编辑、格式设置)"
|
|
|
});
|
|
});
|
|
|
editor.onMount(() => {
|
|
editor.onMount(() => {
|
|
@@ -79,7 +83,13 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
|
|
|
}
|
|
}
|
|
|
}, [modelValue, editor]);
|
|
}, [modelValue, editor]);
|
|
|
|
|
|
|
|
- return <BlockNoteView editor={editor} key={editor.id} editable={isEditable}/>;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <BlockNoteView
|
|
|
|
|
+ editor={editor}
|
|
|
|
|
+ key={editor.id}
|
|
|
|
|
+ editable={isEditable}
|
|
|
|
|
+ />
|
|
|
|
|
+ );
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
export default BlockNoteReact;
|
|
export default BlockNoteReact;
|