tongChong
/
wangEditor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: 修复textSelector中带标签的内容不能带入编辑器内

This commit is contained in:
qianfengg 2021-02-24 15:52:25 +08:00
parent 9315b8d4f4
commit 4dbd023fd5
4 changed files with 80 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
examples/jq-create-dom.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor example</title>
</head>
<body>
<h1>jq create dom</h1>
<div class="wangEditor">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../dist/wangEditor.js"></script>
<script>
var editorAreaDOM = $('.wangEditor'); //为包裹编辑器的DIV
var editor = null;
function createEditor(html) {
var editorArea = '#text-container', editorToolbar = '#toolbar-container', toolbar, textContent, E;
if (editor != null) {
editor.destroy();
editor = null;
$(editorToolbar).remove();
$(editorArea).remove();
}
toolbar = $('<div id="' + editorToolbar.substring(1) + '" class="toolbar"></div>');
textContent = $('<div id="' + editorArea.substring(1) + '" class="text" style="min-height:600px;max-height:1200px"></div>');
if (typeof html == 'string') {
$(html).appendTo(textContent);
}
$(toolbar).appendTo(editorAreaDOM);
$(textContent).appendTo(editorAreaDOM);
$(editorArea).html(`<p>测试</p>`)
E = window.wangEditor;
editor = new E(editorToolbar, editorArea);
editor.config.placeholder = '这里是我加的placeholder';
editor.config.zIndex = 10;
editor.config.uploadVideoServer = '/api/upload-video';
editor.config.uploadImgServer = '/upload/document/images';
editor.config.uploadImgParams = {
identify: 'online_image'
}
editor.config.height = 600;
editor.create();
return editor;
}
createEditor()
</script>
</body>
</html>

10
src/editor/init-fns/init-dom.ts
View File

@ -26,6 +26,7 @@ export default function (editor: Editor): void {
const $textContainerElem: DomElement = $('<div></div>') const $textContainerElem: DomElement = $('<div></div>')
let $textElem: DomElement let $textElem: DomElement
let $children: DomElement | null let $children: DomElement | null
let $subChildren: DomElement | null = null
if (textSelector == null) { if (textSelector == null) {
// 将编辑器区域原有的内容，暂存起来 // 将编辑器区域原有的内容，暂存起来
@ -46,6 +47,8 @@ export default function (editor: Editor): void {
} else { } else {
// toolbarSelector 和 textSelector 都有 // toolbarSelector 和 textSelector 都有
$toolbarSelector.append($toolbarElem) $toolbarSelector.append($toolbarElem)
// 菜单分离后，文本区域内容暂存
$subChildren = $(textSelector).children()
$(textSelector).append($textContainerElem) $(textSelector).append($textContainerElem)
// 将编辑器区域原有的内容，暂存起来 // 将编辑器区域原有的内容，暂存起来
$children = $textContainerElem.children() $children = $textContainerElem.children()
@ -68,6 +71,13 @@ export default function (editor: Editor): void {
$textElem.append($('<p><br></p>')) // 新增一行，方便继续编辑 $textElem.append($('<p><br></p>')) // 新增一行，方便继续编辑
} }
// 菜单分离后，文本区域有标签的带入编辑器内
if ($subChildren && $subChildren.length) {
$textElem.append($subChildren)
// 编辑器有默认值的时候隐藏placeholder
$placeholder.hide()
}
// 编辑区域加入DOM // 编辑区域加入DOM
$textContainerElem.append($textElem) $textContainerElem.append($textElem)

12
test/helpers/create-editor.ts
View File

@ -16,7 +16,8 @@ function createEditor(
document: Document, document: Document,
toolbarId: string, toolbarId: string,
textId?: string, textId?: string,
config?: any config?: any,
htmlStr?: string
): Editor { ): Editor {
const toolbarElem = document.createElement('div') const toolbarElem = document.createElement('div')
toolbarElem.id = toolbarId toolbarElem.id = toolbarId
@ -28,15 +29,18 @@ function createEditor(
const textElem = document.createElement('div') const textElem = document.createElement('div')
textElem.id = textId textElem.id = textId
$('body').append($(textElem)) $('body').append($(textElem))
if (htmlStr) {
textElem.innerHTML = htmlStr
}
editor = new Editor(`#${toolbarId}`, `#${textId}`) editor = new Editor(`#${toolbarId}`, `#${textId}`)
} else {
editor = new Editor(`#${toolbarId}`)
} }
editor = new Editor(`#${toolbarId}`)
if (config) { if (config) {
for (const key in config) { for (const key in config) {
if (Object.prototype.hasOwnProperty.call(config, key)) { if (Object.prototype.hasOwnProperty.call(config, key)) {
;(editor.config as any)[key] = config[key] ; (editor.config as any)[key] = config[key]
} }
} }
} }

12
test/unit/editor/create-editor.test.ts
View File

@ -11,13 +11,19 @@ test('创建一个编辑器实例', () => {
}) })
test('创建一个编辑器实例，toolbar 和 text 分离', () => { test('创建一个编辑器实例，toolbar 和 text 分离', () => {
const editor = createEditor(document, 'div1', 'div2') const editor = createEditor(document, 'div2', 'div3')
expect(editor.id).not.toBeNull() expect(editor.id).not.toBeNull()
}) })
test('一个页面创建多个编辑器实例', () => { test('一个页面创建多个编辑器实例', () => {
const editor1 = createEditor(document, 'div1') const editor1 = createEditor(document, 'div4')
const editor2 = createEditor(document, 'div2') const editor2 = createEditor(document, 'div5')
expect(editor1.id).not.toBeNull() expect(editor1.id).not.toBeNull()
expect(editor2.id).not.toBeNull() expect(editor2.id).not.toBeNull()
}) })
test('创建一个编辑器实例，toolbar 和 text 分离，且文本区域带标签的内容代入编辑区域', () => {
const editor = createEditor(document, 'div6', 'div7', {}, `<p>测试下</p>`)
expect(editor.id).not.toBeNull()
expect(editor.txt.text()).toBe('测试下')
})