Browse Source

```
feat(editor): 添加多语言支持和文件上传功能

- 集成pinia langStore实现多语言切换功能
- 在BlockNoteEditor组件中添加currentLang属性
- 支持中英文语言切换,根据currentLang动态选择字典
- 实现文件上传功能,替换默认上传逻辑为自定义API调用
-

zhangningning 1 tháng trước cách đây
mục cha
commit
7feed7992e

+ 4 - 1
src/components/BlockNoteEditor.vue

@@ -12,6 +12,8 @@
 import { ref, watch } from 'vue';
 import { createReactWrapper } from 'vue-react-wrapper';
 import BlockNoteReact from './react-components/BlockNoteReact';
+import { useLangStore } from '@/pinia/langStore'
+const langStore = useLangStore();
 
 const props = defineProps({
   modelValue: {
@@ -34,7 +36,8 @@ const editorProps = ref({
     emit('update:modelValue', value);
     emit('getHtml', html);
   },
-  editable: props.editable
+  editable: props.editable,
+  currentLang: langStore.currentLang
 });
 const ReactWrapper = createReactWrapper(BlockNoteReact,editorProps)
 // 监听modelValue变化

+ 26 - 16
src/components/react-components/BlockNoteReact.jsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { useCreateBlockNote } from '@blocknote/react';
 import { BlockNoteView } from '@blocknote/mantine';
 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/core/fonts/inter.css';
+import { uploadFile } from '@/api/common.js'
 // 正确导入需要的组件
 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;
+  //currentLang变化时重新创建editor实例
+  React.useEffect(() => {
+
+  }, [currentLang]);
+
   // 创建带有多列支持的 schema
   // const schema = BlockNoteSchema.create({
   //   blockSpecs: {
@@ -31,8 +37,8 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
     //     // columnList: ColumnListBlock
     //   }
     // }),
-    id: 'blocknote-react-editor',
-    dictionary: zh,
+    id: "blocknote-react-editor",
+    dictionary: currentLang === 'en' ? en : zh,
     initialContent: modelValue || undefined,
     iseditable : false,
     autofocus: false, // 默认 false,true 开启自动聚焦
@@ -44,17 +50,15 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
     //   "image", // 图片
     //   "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: "请输入内容(支持块级编辑、格式设置)"
   });
   editor.onMount(() => {
@@ -79,7 +83,13 @@ const BlockNoteReact = ({ modelValue, onUpdateModelValue, editable = true }) =>
     }
   }, [modelValue, editor]);
 
-  return <BlockNoteView editor={editor} key={editor.id} editable={isEditable}/>;
+  return (
+    <BlockNoteView 
+      editor={editor} 
+      key={editor.id} 
+      editable={isEditable}
+    />
+  );
 };
 
 export default BlockNoteReact;

+ 9 - 9
src/pages/WorkflowAdd.vue

@@ -136,15 +136,15 @@ const editorContent = ref(
       type: "paragraph",
       content: [{ type: "text", text: "只读模式" }]
     },
-    {
-    "id": "378ce968-02c2-4856-888b-c35a355aa84b",
-    "type": "codeBlock",
-    "props": {
-        "language": "text"
-    },
-    "content": [],
-    "children": []
-    }
+    // {
+    // "id": "378ce968-02c2-4856-888b-c35a355aa84b",
+    // "type": "codeBlock",
+    // "props": {
+    //     "language": "text"
+    // },
+    // "content": [],
+    // "children": []
+    // }
   ]
 );
 // 表单实例