feat: 选中编辑器内容,可以定位菜单

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
     NResult: typeof import('naive-ui')['NResult']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']

src/views/editor/components/ContentEditor.vue

@@ -19,14 +19,17 @@
                     :style="editorStyle"
                     @on-change="handleChange"
                     @on-created="handleCreated"
+                    @click="handleClick"
+                    @contextmenu.prevent="handleContextMenu"
                 />
+                <!-- <n-popover :show="showPopover" :x="x" :y="y" trigger="manual">厉害！</n-popover> -->
             </n-card>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { IDomEditor, IEditorConfig } from '@wangeditor/editor'
+import { DomEditor, IDomEditor, IEditorConfig } from '@wangeditor/editor'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { isNumber } from 'lodash'
@@ -97,7 +100,7 @@ const ps = defineProps({
         default: false
     }
 })
-const es = defineEmits(['change', 'created', 'update:modelValue'])
+const es = defineEmits(['change', 'created', 'update:modelValue', 'handleClick'])
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef<IDomEditor>()
 const valueHtml = ref('')
@@ -122,6 +125,24 @@ const handleCreated = (editor: IDomEditor) => {
     editorRef.value = editor
     es('created', editor)
 }
+//点击
+const handleClick = (event: any) => {
+    const key = getKey(event.target)
+    es('handleClick', key)
+}
+//获取key
+const getKey = (elem: any): string => {
+    const key = elem.getAttribute('data-key')
+    if (key && elem != null) {
+        return key
+    } else {
+        elem = elem.parentElement
+        return getKey(elem)
+    }
+}
+const handleContextMenu = () => {
+    console.log('右键菜单')
+}
 // 编辑器配置
 const message = useMessage()
 const editorConfig = computed((): IEditorConfig => {

src/views/editor/components/ContentTree.vue

@@ -12,20 +12,20 @@
                 v-model:selected-keys="treeSelectedKeys"
                 :pattern="searchKey"
                 block-line
+                virtual-scroll
             />
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { realComposableData, searchKey, treeData, xmlContent, xmlDOM, treeSelectedKeys } from '../constants'
+import { realComposableData, searchKey, treeData, xmlContent, xmlDOM, treeSelectedKeys, treeRef } from '../constants'
 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'
 
 const xmlProcessing = useXMLProcessing()
-const treeRef = ref()
 const expandedKeys = ref<string[]>([])
 onMounted(function () {
     // const res = xmlProcessing.processXML(FileXML, nodeSet)

src/views/editor/constants/index.ts

@@ -14,6 +14,7 @@ export const editorRef = ref()
 export const formData = reactive({
     html: ''
 })
+export const treeRef = ref()
 // 递归函数：检查树中是否存在满足条件的节点
 // 递归函数：检查树中是否存在满足条件的节点，并构建新的树结构
 function buildFilteredTree(tree: TreeRenderResult, searchString: string): TreeRenderResult | null {

src/views/editor/functions/index.ts

 import { IDomEditor } from '@wangeditor/editor'
-import { editorRef, showLoading, treeData, xmlContent, xmlDOM } from '../constants'
+import { editorRef, showLoading, treeData, treeRef, treeSelectedKeys, xmlContent, xmlDOM } from '../constants'
 import { TreeOption } from 'naive-ui'
 import { nodeSet } from '../constants/nodeParsed'
 
@@ -12,12 +12,18 @@ export const handleEditor = (editor: IDomEditor) => {
     // xmlContent.value = res.xmlContent
 }
 
+export const handleClick = (key: string) => {
+    treeRef.value?.scrollTo({ key })
+    treeSelectedKeys.value = [key]
+}
+
 let lastFocusedId = ''
 export const nodeProps = ({ option }: { option: TreeOption }) => {
     return {
         onClick() {
-            editorRef.value?.editorRef.scrollToElem([option.key])
-            let container = editorRef.value?.editorRef?.getEditableContainer()
+            const container = editorRef.value?.editorRef.getEditableContainer()
+            const id = container.querySelector(`[data-key="${option.key}"]`)?.getAttribute('id')
+            editorRef.value?.editorRef.scrollToElem([id])
             if (container) {
                 if (lastFocusedId) {
                     container.querySelector(`#${lastFocusedId}`)?.classList.remove('focus')

src/views/editor/functions/render-elem.ts

@@ -9,7 +9,7 @@ const renderElem = (type: string, style = { display: 'block' }) => {
             // @ts-ignore
             paddingLeft: Number(elem.dataIndent) * 5 + 'px'
         })
-        return h(type, { style, attrs: { dataKey: dataKey, id: dataKey } }, children)
+        return h(type, { style, attrs: { 'data-key': dataKey } }, children)
     }
 }
 const createRenderConfig = (types: string | string[]) => {

src/views/editor/index.vue

 <template>
     <n-spin class="h-full w-full" content-class="h-full w-full" :show="showLoading" description="加载中...">
-        <ContentEditor ref="editorRef" v-model="formData.html" @change="handleEditor" @created="handleEditor">
+        <ContentEditor ref="editorRef" v-model="formData.html" @change="handleEditor" @created="handleEditor" @handleClick="handleClick">
             <template #left>
                 <n-card class="h-full min-w-[300px] max-w-[300px] mr-[15px]" content-class="bg-baseColor !p-0 overflow-hidden">
                     <ContentTree></ContentTree>
@@ -14,7 +14,7 @@
 import ContentEditor from './components/ContentEditor.vue'
 import ContentTree from './components/ContentTree.vue'
 import { editorRef, formData, showLoading, xmlContent } from './constants'
-import { handleEditor } from './functions'
+import { handleClick, handleEditor } from './functions'
 
 onMounted(() => {
     // nextTick(() => {