fix: normalize when create editor

wangeditor-team · Jul 11, 2021 · 2b51962 · 2b51962
1 parent b9612f5
commit 2b51962
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -43,9 +43,9 @@
   "peerDependencies": {
     "dom7": "^3.0.0",
     "is-hotkey": "^0.2.0",
+    "lodash-es": "^4.17.21",
     "slate": "^0.63.0",
-    "snabbdom": "^3.0.1",
-    "lodash-es": "^4.17.21"
+    "snabbdom": "^3.0.1"
   },
   "dependencies": {
     "event-emitter": "^0.3.5",

diff --git a/packages/core/src/create/create-editor.ts b/packages/core/src/create/create-editor.ts
@@ -15,6 +15,7 @@ import TextArea from '../text-area/TextArea'
 import HoverBar from '../menus/bar/HoverBar'
 import { genEditorConfig } from '../config/index'
 import { IDomEditor } from '../editor/interface'
+import { DomEditor } from '../editor/dom-editor'
 import { IEditorConfig } from '../config/interface'
 import { promiseResolveThen } from '../utils/util'
 import { isRepeatedCreate, genDefaultContent } from './helper'
@@ -98,6 +99,7 @@ export default function (option: ICreateOption) {
   } else {
     editor.children = genDefaultContent()
   }
+  DomEditor.normalizeContent(editor) // 格式化，用户输入的 content 可能不规范（如两个相连的 text 没有合并）
   textarea.changeViewState() // 初始化时触发一次，以便能初始化 textarea DOM 和 selection
 
   // 触发生命周期

diff --git a/packages/core/src/editor/dom-editor.ts b/packages/core/src/editor/dom-editor.ts
@@ -488,4 +488,11 @@ export const DomEditor = {
   getHoverbar(editor: IDomEditor): HoverBar | null {
     return EDITOR_TO_HOVER_BAR.get(editor) || null
   },
+
+  // 格式化 editor content
+  normalizeContent(editor: IDomEditor) {
+    editor.children.forEach((node, index) => {
+      editor.normalizeNode([node, [index]])
+    })
+  },
 }
diff --git a/packages/core/src/editor/interface.ts b/packages/core/src/editor/interface.ts
@@ -27,7 +27,7 @@ export interface IDomEditor extends Editor {
 
   // 内容处理
   handleTab: () => void
-  getHtml: () => string
+  getHtml: (withFormat: boolean) => string
   getText: () => string
   getSelectionText: () => string // 获取选区文字
   getHeaders: () => { id: string; type: string; text: string }[] // 获取所有标题

diff --git a/packages/core/src/editor/plugins/with-content.ts b/packages/core/src/editor/plugins/with-content.ts
@@ -51,12 +51,17 @@ export const withContent = <T extends Editor>(editor: T) => {
   }
 
   // 获取 html
-  e.getHtml = (): string => {
+  e.getHtml = (withFormat = true): string => {
     const { children = [] } = e
-    const html = children.map(child => node2html(child, e)).join('\n')
-    return xmlFormat(`<div>${html}</div>`, {
-      collapseContent: true,
-    })
+    let html = children.map(child => node2html(child, e)).join('')
+    html = `<div>${html}</div>`
+
+    if (withFormat) {
+      return xmlFormat(html, {
+        collapseContent: true,
+      })
+    }
+    return html
   }
 
   // 获取 text

diff --git a/packages/editor/examples/index.html b/packages/editor/examples/index.html
@@ -6,6 +6,10 @@
 <title>we-2021 demo</title>
 <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
 <style>
+  body {
+    margin: 0 10px;
+  }
+
   /* 编辑器 dom */
   #container {
     width: 800px;