<\/p>$/gim, '') // 去掉最后的
+ // 去掉空行
+ html = html.replace(/
<\/p>/gim, '')
+ // 去掉最后的 空标签
+ html = html.replace(EMPTY_P_LAST_REGEX, '')
+ // 为了避免用户在最后生成的EMPTY_P标签中编辑数据, 最后产生多余标签, 去除所有p标签上的data-we-empty-p属性
+ html = html.replace(EMPTY_P_REGEX, '
')
/**
* 这里的代码为了处理火狐多余的空行标签,但是强制删除空行标签会带来其他问题
- * html()方法返回的的值,"
"中pr会被删除,只留下,点不进去,从而产生垃圾数据
+ * html()方法返回的的值,EMPTY_P中pr会被删除,只留下
,点不进去,从而产生垃圾数据
* 目前在末位有多个空行的情况下执行撤销重做操作,会产生一种不记录末尾空行的错觉
* 暂时注释, 等待进一步的兼容处理
*/
@@ -174,7 +179,7 @@ class Text {
// 有 val ，则是设置 html
val = val.trim()
if (val === '') {
- val = `
`
+ val = EMPTY_P
}
if (val.indexOf('<') !== 0) {
// 内容用 p 标签包裹
@@ -244,20 +249,11 @@ class Text {
*/
public append(html: string): void {
const editor = this.editor
- const $textElem = editor.$textElem
- const blankLineReg = /(
<\/p>)+$/g
if (html.indexOf('<') !== 0) {
// 普通字符串，用
包裹
html = `
${html}
`
}
- if (blankLineReg.test($textElem.html().trim())) {
- // 如果有多个空行替换最后一个
- const insertHtml = $textElem.html().replace(/(.*)
<\/p>/, '$1' + html)
- this.html(insertHtml)
- } else {
- $textElem.append($(html))
- }
-
+ this.html(this.html() + html)
// 初始化选区，将光标定位到内容尾部
editor.initSelection()
}
diff --git a/src/utils/const.ts b/src/utils/const.ts
index 80ee01d..2423d01 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -7,3 +7,12 @@ export function EMPTY_FN() {}
//用于校验是否为url格式字符串
export const urlRegex = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/
+
+// 编辑器为了方便继续输入/换行等原因 主动生成的空标签
+export const EMPTY_P = '
'
+
+// 用于校验dom中最后 由编辑器主动生成的空标签结构
+export const EMPTY_P_LAST_REGEX = /<\/p>$/gim
+
+// 用于校验dom中所有 由编辑器主动生成的空标签结构
+export const EMPTY_P_REGEX = //gim
diff --git a/test/unit/editor/history/decompile.test.ts b/test/unit/editor/history/decompile.test.ts
index b7db2d1..319e68d 100644
--- a/test/unit/editor/history/decompile.test.ts
+++ b/test/unit/editor/history/decompile.test.ts
@@ -7,6 +7,7 @@ import createEditor from '../../../helpers/create-editor'
import Editor from '../../../../src/editor'
import compile from '../../../../src/editor/history/data/node/compile'
import { restore, revoke } from '../../../../src/editor/history/data/node/decompilation'
+import { EMPTY_P } from '../../../../src/utils/const'
let editor: Editor
@@ -28,7 +29,7 @@ describe('Editor history decompile', () => {
revoke(compileData)
- expect(editor.$textElem.html()).toEqual('
')
+ expect(editor.$textElem.html()).toEqual(EMPTY_P)
done()
})
diff --git a/test/unit/menus/redo.test.ts b/test/unit/menus/redo.test.ts
index cbb3d11..88665da 100644
--- a/test/unit/menus/redo.test.ts
+++ b/test/unit/menus/redo.test.ts
@@ -23,7 +23,7 @@ test('重做 兼容模式', done => {
const redo = getMenuInstance(editor, Redo) as Redo
redo.clickHandler()
// 兼容模式
- expect(editor.$textElem.html()).toEqual('
123
')
+ expect(editor.txt.html()).toEqual('
123
')
}
done()
},
diff --git a/test/unit/menus/table/create-table.test.ts b/test/unit/menus/table/create-table.test.ts
index 4878135..55035fc 100644
--- a/test/unit/menus/table/create-table.test.ts
+++ b/test/unit/menus/table/create-table.test.ts
@@ -6,6 +6,7 @@ import CreateTable from '../../../../src/menus/table/create-table'
import createEditor from '../../../helpers/create-editor'
import mockCommand from '../../../helpers/command-mock'
import $ from '../../../../src/utils/dom-core'
+import { EMPTY_P } from '../../../../src/utils/const'
let editor: ReturnType
let createTableInstance: CreateTable
@@ -26,7 +27,7 @@ describe('Create Table Util', () => {
expect(document.execCommand).toBeCalledWith(
'insertHTML',
false,
- `
`
+ `${EMPTY_P}`
)
})
diff --git a/test/unit/menus/undo.test.ts b/test/unit/menus/undo.test.ts
index ae8761c..81dabff 100644
--- a/test/unit/menus/undo.test.ts
+++ b/test/unit/menus/undo.test.ts
@@ -6,6 +6,7 @@ import createEditor from '../../helpers/create-editor'
import Undo from '../../../src/menus/undo/index'
import mockCmdFn from '../../helpers/command-mock'
import { getMenuInstance } from '../../helpers/menus'
+import { EMPTY_P } from '../../../src/utils/const'
test('撤销', done => {
let count = 0
@@ -18,7 +19,7 @@ test('撤销', done => {
undo.clickHandler()
if (editor.isCompatibleMode) {
// 兼容模式
- expect(editor.$textElem.html()).toEqual('
')
+ expect(editor.$textElem.html()).toEqual(EMPTY_P)
} else {
// 标准模式
expect(editor.history.size).toEqual([0, 1])
diff --git a/test/unit/menus/video/upload-video.test.ts b/test/unit/menus/video/upload-video.test.ts
index bda80f2..07ad711 100644
--- a/test/unit/menus/video/upload-video.test.ts
+++ b/test/unit/menus/video/upload-video.test.ts
@@ -8,6 +8,7 @@ import mockFile from '../../../helpers/mock-file'
import mockXHR from '../../../helpers/mock-xhr'
import Editor from '../../../../src/editor'
import UploadVideo from '../../../../src/menus/video/upload-video'
+import { EMPTY_P } from '../../../../src/utils/const'
let editor: Editor
let id = 1
@@ -71,7 +72,7 @@ describe('upload video', () => {
expect(document.execCommand).toBeCalledWith(
'insertHTML',
false,
- `
`
+ `${EMPTY_P}`
)
})
@@ -89,7 +90,7 @@ describe('upload video', () => {
expect(document.execCommand).toBeCalledWith(
'insertHTML',
false,
- `
`
+ `${EMPTY_P}`
)
})
diff --git a/test/unit/text/del-to-keep-p.test.ts b/test/unit/text/del-to-keep-p.test.ts
index 5d1ee4e..f7033a3 100644
--- a/test/unit/text/del-to-keep-p.test.ts
+++ b/test/unit/text/del-to-keep-p.test.ts
@@ -3,6 +3,7 @@
* @author luochao
*/
import delToKeepP from '../../../src/text/event-hooks/del-to-keep-p'
+import { EMPTY_P } from '../../../src/utils/const'
import createEditor from '../../helpers/create-editor'
describe('editor.text event-hooks tab-to-space test', () => {
@@ -17,7 +18,7 @@ describe('editor.text event-hooks tab-to-space test', () => {
expect(downFns.length).toBe(1)
})
- test('当编辑器内容为空时，执行 up 函数，则会插入
内容', () => {
+ test('当编辑器内容为空时，执行 up 函数，则会插入 EMPTY_P 内容', () => {
const upFns: Function[] = []
const downFns: Function[] = []
const editor = createEditor(document, 'div2')
@@ -30,10 +31,10 @@ describe('editor.text event-hooks tab-to-space test', () => {
fn()
})
- expect(editor.$textElem.elems[0].innerHTML).toEqual('
')
+ expect(editor.$textElem.html()).toEqual(EMPTY_P)
})
- test('当编辑器内容只有
时，执行 up 函数，则会插入
内容', () => {
+ test('当编辑器内容只有
时，执行 up 函数，则会插入 EMPTY_P 内容', () => {
const upFns: Function[] = []
const downFns: Function[] = []
const editor = createEditor(document, 'div3')
@@ -46,17 +47,17 @@ describe('editor.text event-hooks tab-to-space test', () => {
fn()
})
- expect(editor.$textElem.elems[0].innerHTML).toEqual('
')
+ expect(editor.$textElem.html()).toEqual(` ${EMPTY_P}`)
})
- test('当编辑器内容清空到只剩下
内容时，则不允许再删除', () => {
+ test('当编辑器内容清空到只剩下 EMPTY_P 内容时，则不允许再删除', () => {
const upFns: Function[] = []
const downFns: Function[] = []
const editor = createEditor(document, 'div4')
delToKeepP(editor, upFns, downFns)
- editor.txt.html('
')
+ editor.txt.html(EMPTY_P)
const e = new KeyboardEvent('mousedown')
const mockPreventDefault = jest.fn()
@@ -66,7 +67,7 @@ describe('editor.text event-hooks tab-to-space test', () => {
fn(e)
})
- expect(editor.$textElem.elems[0].innerHTML).toEqual('
')
+ expect(editor.$textElem.html()).toEqual(EMPTY_P)
expect(mockPreventDefault).toBeCalled()
})
})
diff --git a/test/unit/text/enter-to-create-p.test.ts b/test/unit/text/enter-to-create-p.test.ts
index 8f9bd1c..c462c68 100644
--- a/test/unit/text/enter-to-create-p.test.ts
+++ b/test/unit/text/enter-to-create-p.test.ts
@@ -6,6 +6,7 @@ import enterToCreateP from '../../../src/text/event-hooks/enter-to-create-p'
import $ from '../../../src/utils/dom-core'
import createEditor from '../../helpers/create-editor'
import commandMock from '../../helpers/command-mock'
+import { EMPTY_P } from '../../../src/utils/const'
type Editor = ReturnType
@@ -38,7 +39,7 @@ describe('editor.text event-hooks tab-to-space test', () => {
expect(downFns.length).toBe(1)
})
- test('当编辑器选区内容父元素为
', () => {
+ test('当编辑器选区内容父元素为
')
+ expect(editor.$textElem.elems[0].innerHTML).toEqual(EMPTY_P)
})
test('当编辑器选区内容的父元素不是 $textElm，则不处理', () => {
diff --git a/test/unit/text/index.test.ts b/test/unit/text/index.test.ts
index 374b5d4..85542f5 100644
--- a/test/unit/text/index.test.ts
+++ b/test/unit/text/index.test.ts
@@ -6,6 +6,7 @@ import createEditor from '../../helpers/create-editor'
import $ from '../../../src/utils/dom-core'
import dispatchEvent from '../../helpers/mock-dispatch-event'
import { UA } from '../../../src/utils/util'
+import { EMPTY_P } from '../../../src/utils/const'
let editor: ReturnType
let id = 1
@@ -73,13 +74,13 @@ describe('Editor Text test', () => {
expect(editor.$textContainerElem.find('.placeholder').elems[0]).toHaveStyle('display:none')
})
- test('编辑器初始化后，调用 txt clear 方法，清空编辑内容，只留下 p>
', () => {
+ test('编辑器初始化后，调用 txt clear 方法，清空编辑内容，只留下 EMPTY_P', () => {
editor.txt.html('123
')
editor.txt.clear()
expect(editor.txt.html()).toBe('')
- expect(editor.$textElem.elems[0].innerHTML).toBe('
')
+ expect(editor.$textElem.elems[0].innerHTML).toBe(EMPTY_P)
})
test('编辑器初始化后，调用 txt setJSON 方法将 JSON 内容设置成 html', () => {