feat: 富文本解析

package-lock.json

@@ -21,6 +21,7 @@
                 "pinia": "^2.1.7",
                 "pinia-plugin-persistedstate": "^3.2.1",
                 "qs": "^6.12.1",
+                "snabbdom": "^3.6.2",
                 "uuidjs": "^5.1.0",
                 "vite-plugin-compression": "^0.5.1",
                 "vue": "^3.4.19",

package.json

@@ -24,6 +24,7 @@
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
         "qs": "^6.12.1",
+        "snabbdom": "^3.6.2",
         "uuidjs": "^5.1.0",
         "vite-plugin-compression": "^0.5.1",
         "vue": "^3.4.19",

src/views/editor/components/ContentEditor.vue

@@ -24,6 +24,17 @@ import { IDomEditor, IEditorConfig } from '@wangeditor/editor'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { isNumber } from 'lodash'
+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'
+
+const module: Partial<IModuleConf> = {
+    renderElems: [renderElemConf],
+    elemsToHtml: [elemToHtmlConf],
+    parseElemsHtml: [parseHtmlConf]
+}
+Boot.registerModule(module)
 
 type InsertFnType = (url: string, alt: string, href: string) => void
 const ps = defineProps({
@@ -179,7 +190,7 @@ onBeforeUnmount(() => {
     editor?.destroy()
 })
 defineExpose({
-    editor: editorRef
+    editorRef
 })
 </script>
 <style src="@wangeditor/editor/dist/css/style.css"></style>

src/views/editor/functions/elem-to-html.ts

+import { SlateElement } from '@wangeditor/editor'
+
+function JOBCARDToHtml(elem: SlateElement, childrenHtml: string): string {
+    return `<JOBCARD
+        data-w-e-type="JOBCARD"
+        data-w-e-is-void
+        data-w-e-is-inline
+    >${childrenHtml}</JOBCARD>`
+}
+export const elemToHtmlConf = {
+    type: 'JOBCARD',
+    elemToHtml: JOBCARDToHtml
+}

src/views/editor/functions/parse-elem-html.ts

+import { IDomEditor, SlateDescendant, SlateElement } from '@wangeditor/editor'
+
+function parseJOBCARDHtml(domElem: Element, children: SlateDescendant[], editor: IDomEditor): SlateElement {
+    const myResume = {
+        type: 'JOBCARD',
+        children: [{ text: (children[0] as any).text }] // void node 必须有 children ，其中有一个空字符串，重要！！！
+    }
+    return myResume
+}
+export const parseHtmlConf = {
+    selector: 'JOBCARD[data-w-e-type="JOBCARD"]', // CSS 选择器，匹配特定的 HTML 标签
+    parseElemHtml: parseJOBCARDHtml
+}

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

+import { h, VNode } from 'snabbdom'
+import { IDomEditor, SlateElement } from '@wangeditor/editor'
+
+function renderJOBCARD(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
+    return h('JOBCARD', { style: { display: 'block' } }, children)
+}
+
+export const renderElemConf = {
+    type: 'JOBCARD',
+    renderElem: renderJOBCARD
+}

src/views/editor/index.vue

@@ -13,5 +13,14 @@ import ContentEditor from './components/ContentEditor.vue'
 import ContentTree from './components/ContentTree.vue'
 import { editorRef, formData } from './constants'
 import { handleEditor } from './functions'
+
+onMounted(() => {
+    nextTick(() => {
+        editorRef.value?.editorRef?.setHtml('<JOBCARD data-w-e-type="JOBCARD">Custom Content</JOBCARD>')
+        const node = { type: 'JOBCARD', children: [{ text: 'simple text' }] }
+        editorRef.value?.editorRef?.insertNode(node)
+        console.log(editorRef.value?.editorRef.getHtml())
+    })
+})
 </script>
 <style lang="less" scoped></style>