feat: 富文本内容展示

src/views/editor/components/ContentEditor.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { DomEditor, IDomEditor, IEditorConfig } from '@wangeditor/editor'
+import { IDomEditor, IEditorConfig } from '@wangeditor/editor'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { isNumber } from 'lodash'

src/views/editor/components/ContentTree.vue

@@ -19,20 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-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 { realComposableData, searchKey, treeSelectedKeys, treeRef } from '../constants'
 import type { TreeOption } from 'naive-ui'
 import { nodeProps } from '../functions'
 
-const xmlProcessing = useXMLProcessing()
 const expandedKeys = ref<string[]>([])
-onMounted(function () {
-    // const res = xmlProcessing.processXML(FileXML, nodeSet)
-    // treeData.value = res.treeData
-    // xmlDOM.value = res.xmlDOM
-    // xmlContent.value = res.xmlContent
-})
 
 function getAllKeys(item: TreeOption[]) {
     return item.reduce(function (q, w) {

src/views/editor/functions/index.ts

-import { IDomEditor, SlateTransforms } from '@wangeditor/editor'
-import { editorRef, showLoading, treeData, treeRef, treeSelectedKeys, xmlContent, xmlDOM } from '../constants'
+import { IDomEditor } from '@wangeditor/editor'
+import { editorRef, formData, showLoading, treeData, treeRef, treeSelectedKeys, xmlContent, xmlDOM } from '../constants'
 import { TreeOption } from 'naive-ui'
 import { nodeSet } from '../constants/nodeParsed'
+import { UUID } from 'uuidjs'
 
 export const handleEditor = (editor: IDomEditor) => {
     if (editor.getHtml() == '<p><br></p>') return
-    console.log(editor.getHtml())
     const xmlProcessing = useXMLProcessing()
-    const res = xmlProcessing.processXML(editor.getHtml(), nodeSet)
+    const res = xmlProcessing.processXML(editor.getHtml().replace(/<p><br><\/p>/g, ''), nodeSet)
     treeData.value = res.treeData
-    xmlDOM.value = res.xmlDOM
-    xmlContent.value = res.xmlContent
 }
 
 export const handleClick = (key: string) => {
     treeRef.value?.scrollTo({ key })
     treeSelectedKeys.value = [key]
+    setEditorActive(key)
 }
 
 export const handleContextSelect = (key: string) => {
     if (key == 'TaskTitle') {
-        const node = { type: 'TaskTitle', dataKey: 'fasdfasdf', children: [{ text: 'TaskTitle' }] }
+        const node = { type: 'TaskTitle', dataKey: 'g-' + UUID.generate(), children: [{ text: 'TaskTitle' }] }
         editorRef.value?.editorRef?.insertNode(node)
     } else if (key == 'TopicTitle') {
-        const node = { type: 'TopicTitle', children: [{ text: 'TopicTitle' }] }
+        const node = { type: 'TopicTitle', dataKey: 'g-' + UUID.generate(), children: [{ text: 'TopicTitle' }] }
         editorRef.value?.editorRef?.insertNode(node)
     }
 }
 
-let lastFocusedId = ''
 export const nodeProps = ({ option }: { option: TreeOption }) => {
     return {
         onClick() {
-            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')
-                }
-                lastFocusedId = option.key as string
-                container.querySelector(`#${lastFocusedId}`)?.classList.add('focus')
-            }
+            setEditorActive(option.key as string, (id: string) => {
+                editorRef.value?.editorRef.scrollToElem([id])
+            })
         }
     }
 }
+
+let lastFocusedId = ''
+export const setEditorActive = (key: string, callBack?: Function) => {
+    const container = editorRef.value?.editorRef.getEditableContainer()
+    const id = container.querySelector(`[data-key="${key}"]`)?.getAttribute('id')
+    if (container) {
+        if (lastFocusedId) {
+            container.querySelector(`#${lastFocusedId}`)?.classList.remove('bg-primaryColorHover')
+        }
+        lastFocusedId = id
+        container.querySelector(`#${id}`)?.classList.add('bg-primaryColorHover')
+    }
+    if (callBack) callBack(id)
+}
+
 export const uploadXml = async () => {
     const input = document.createElement('input')
     input.type = 'file'
@@ -59,10 +65,7 @@ export const uploadXml = async () => {
             showLoading.value = true
             const res = await xmlProcessing.processFile(file, nodeSet)
             showLoading.value = false
-            treeData.value = res.treeData
-            xmlDOM.value = res.xmlDOM
-            xmlContent.value = res.xmlContent
-            editorRef.value?.editorRef?.setHtml(xmlContent.value)
+            formData.html = res.xmlContent
         }
     })
 }

src/views/editor/index.vue

@@ -29,8 +29,4 @@ onMounted(() => {
     // })
 })
 </script>
-<style lang="less" scoped>
-:deep(.focus) {
-    background: red;
-}
-</style>
+<style lang="less" scoped></style>