feat: 提交上传

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NInput: typeof import('naive-ui')['NInput']
@@ -15,7 +16,10 @@ declare module 'vue' {
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NResult: typeof import('naive-ui')['NResult']
+    NSpace: typeof import('naive-ui')['NSpace']
     NTree: typeof import('naive-ui')['NTree']
+    NUpload: typeof import('naive-ui')['NUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/views/editor/components/ContentEditor.vue

 <template>
     <div class="z-10 h-full flex flex-col">
         <!-- 工具栏 -->
-        <Toolbar :editor="editorRef" :editorId="editorId" class="border-b border-solid border-borderColor" />
+        <Toolbar :editor="editorRef" :editorId="editorId" :defaultConfig="toolbarConfig" class="border-b border-solid border-borderColor" />
         <!-- 编辑器 -->
         <div class="p-[15px] flex flex-1 overflow-hidden">
             <slot name="left"></slot>
@@ -28,6 +28,7 @@ import { Boot, IModuleConf } from '@wangeditor/editor'
 import renderElemConf from '../functions/render-elem'
 import elemToHtmlConf from '../functions/elem-to-html'
 import parseHtmlConf from '../functions/parse-elem-html'
+import myMenuConf from '../functions/extra-menu'
 
 const module: Partial<IModuleConf> = {
     renderElems: renderElemConf,
@@ -35,6 +36,33 @@ const module: Partial<IModuleConf> = {
     parseElemsHtml: parseHtmlConf
 }
 Boot.registerModule(module)
+Boot.registerMenu(myMenuConf) // 注册菜单
+
+//菜单配置
+const toolbarConfig = {
+    toolbarKeys: [
+        'headerSelect',
+        'bold',
+        'italic',
+        'underline',
+        'through',
+        'color',
+        'fontSize',
+        'lineHeight',
+        'bulletedList',
+        'numberedList',
+        'justifyLeft',
+        'justifyCenter',
+        'justifyRight',
+        'undo',
+        'redo',
+        'uploadImage',
+        'insertLink',
+        'fullScreen',
+        'clearStyle',
+        'XML'
+    ]
+}
 
 type InsertFnType = (url: string, alt: string, href: string) => void
 const ps = defineProps({

src/views/editor/components/ContentTree.vue

@@ -10,7 +10,6 @@
                 :data="realComposableData"
                 :node-props="nodeProps"
                 v-model:selected-keys="treeSelectedKeys"
-                :render-label="nodeProps.renderLabel"
                 :pattern="searchKey"
                 block-line
             />
@@ -24,22 +23,15 @@ import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 import FileXML from '@/assets/file/CES-QEC-V250-A.xml?raw'
 import type { TreeOption } from 'naive-ui'
 import { nodeProps } from '../functions'
-import {editorRef} from '../constants'
 
 const xmlProcessing = useXMLProcessing()
-
-watchEffect(function() {
-    console.log('the keys', treeSelectedKeys.value, editorRef.value?.editorRef?.getEditableContainer())
-
-})
-
 const treeRef = ref()
 const expandedKeys = ref<string[]>([])
 onMounted(function () {
-    const res = xmlProcessing.processXML(FileXML, nodeSet)
-    treeData.value = res.treeData
-    xmlDOM.value = res.xmlDOM
-    xmlContent.value = res.xmlContent
+    // const res = xmlProcessing.processXML(FileXML, nodeSet)
+    // treeData.value = res.treeData
+    // xmlDOM.value = res.xmlDOM
+    // xmlContent.value = res.xmlContent
 })
 
 function getAllKeys(item: TreeOption[]) {

src/views/editor/functions/extra-menu.ts

+import { IButtonMenu, IDomEditor } from '@wangeditor/editor'
+import { uploadXml } from '.'
+
+class XMLMenu implements IButtonMenu {
+    title: string
+    tag: string
+    constructor() {
+        this.title = '上传XML' // 自定义菜单标题
+        this.tag = 'button' // 菜单的标签，默认是button
+    }
+    getValue(editor: IDomEditor): string | boolean {
+        // 获取菜单执行时的 value，用不到则返回空字符串或 false
+        return ''
+    }
+    isActive(editor: IDomEditor): boolean {
+        // 菜单是否需要激活，用不到则返回 false
+        return false
+    }
+    isDisabled(editor: IDomEditor): boolean {
+        // 菜单是否需要禁用，用不到则返回 false
+        return false
+    }
+    async exec(editor: IDomEditor, value: string | boolean) {
+        // 点击菜单时触发的函数
+        if (this.isDisabled(editor)) return
+        const arrFileHandle = await (window as any).showOpenFilePicker({
+            types: [
+                {
+                    accept: {
+                        'XML/*': ['.xml']
+                    }
+                }
+            ]
+        })
+        const file = await arrFileHandle[0].getFile()
+        uploadXml(file)
+    }
+}
+export default {
+    key: 'XML', // 定义 menu key，要保证唯一、不重复
+    factory() {
+        return new XMLMenu() // 返回定义的菜单类实例
+    }
+}

src/views/editor/functions/index.ts

 import { IDomEditor } from '@wangeditor/editor'
-import { editorRef } from '../constants'
+import { editorRef, treeData, xmlContent, xmlDOM } from '../constants'
 import { TreeOption } from 'naive-ui'
+import { nodeSet } from '../constants/nodeParsed'
 
 export const handleEditor = (editor: IDomEditor) => {
-
     // console.log(editor.getElemsByTypePrefix('JOBCARD'))
     // console.log(editor)
     // const headers = editor.getElemsByTypePrefix('header')
@@ -34,3 +34,10 @@ export const nodeProps = ({ option }: { option: TreeOption }) => {
         }
     }
 }
+const xmlProcessing = useXMLProcessing()
+export const uploadXml = async (file: File) => {
+    const res = await xmlProcessing.processFile(file, nodeSet)
+    treeData.value = res.treeData
+    xmlDOM.value = res.xmlDOM
+    xmlContent.value = res.xmlContent
+}