fix: 修复textSelector中带标签的内容不能带入编辑器内
This commit is contained in:
qianfengg
parent
9315b8d4f4
commit
4dbd023fd5
|
|
@ -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>
|
||||
|
|
@ -26,6 +26,7 @@ export default function (editor: Editor): void {
|
|||
const $textContainerElem: DomElement = $('<div></div>')
|
||||
let $textElem: DomElement
|
||||
let $children: DomElement | null
|
||||
let $subChildren: DomElement | null = null
|
||||
|
||||
if (textSelector == null) {
|
||||
// 将编辑器区域原有的内容，暂存起来
|
||||
|
|
@ -46,6 +47,8 @@ export default function (editor: Editor): void {
|
|||
} else {
|
||||
// toolbarSelector 和 textSelector 都有
|
||||
$toolbarSelector.append($toolbarElem)
|
||||
// 菜单分离后，文本区域内容暂存
|
||||
$subChildren = $(textSelector).children()
|
||||
$(textSelector).append($textContainerElem)
|
||||
// 将编辑器区域原有的内容，暂存起来
|
||||
$children = $textContainerElem.children()
|
||||
|
|
@ -68,6 +71,13 @@ export default function (editor: Editor): void {
|
|||
$textElem.append($('<p><br></p>')) // 新增一行，方便继续编辑
|
||||
}
|
||||
|
||||
// 菜单分离后，文本区域有标签的带入编辑器内
|
||||
if ($subChildren && $subChildren.length) {
|
||||
$textElem.append($subChildren)
|
||||
// 编辑器有默认值的时候隐藏placeholder
|
||||
$placeholder.hide()
|
||||
}
|
||||
|
||||
// 编辑区域加入DOM
|
||||
$textContainerElem.append($textElem)
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ function createEditor(
|
|||
document: Document,
|
||||
toolbarId: string,
|
||||
textId?: string,
|
||||
config?: any
|
||||
config?: any,
|
||||
htmlStr?: string
|
||||
): Editor {
|
||||
const toolbarElem = document.createElement('div')
|
||||
toolbarElem.id = toolbarId
|
||||
|
|
@ -28,15 +29,18 @@ function createEditor(
|
|||
const textElem = document.createElement('div')
|
||||
textElem.id = textId
|
||||
$('body').append($(textElem))
|
||||
if (htmlStr) {
|
||||
textElem.innerHTML = htmlStr
|
||||
}
|
||||
editor = new Editor(`#${toolbarId}`, `#${textId}`)
|
||||
} else {
|
||||
editor = new Editor(`#${toolbarId}`)
|
||||
}
|
||||
|
||||
editor = new Editor(`#${toolbarId}`)
|
||||
|
||||
if (config) {
|
||||
for (const key in config) {
|
||||
if (Object.prototype.hasOwnProperty.call(config, key)) {
|
||||
;(editor.config as any)[key] = config[key]
|
||||
; (editor.config as any)[key] = config[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,19 @@ test('创建一个编辑器实例', () => {
|
|||
})
|
||||
|
||||
test('创建一个编辑器实例，toolbar 和 text 分离', () => {
|
||||
const editor = createEditor(document, 'div1', 'div2')
|
||||
const editor = createEditor(document, 'div2', 'div3')
|
||||
expect(editor.id).not.toBeNull()
|
||||
})
|
||||
|
||||
test('一个页面创建多个编辑器实例', () => {
|
||||
const editor1 = createEditor(document, 'div1')
|
||||
const editor2 = createEditor(document, 'div2')
|
||||
const editor1 = createEditor(document, 'div4')
|
||||
const editor2 = createEditor(document, 'div5')
|
||||
expect(editor1.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('测试下')
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue