From 683fe00d86c8ba4020ebd35cd358960bc49dc6c2 Mon Sep 17 00:00:00 2001 From: clinfc <1962109568@qq.com> Date: Tue, 3 Nov 2020 19:48:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E5=A4=9A=E5=AE=9E=E4=BE=8B=20disabl?= =?UTF-8?q?e=20=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/disable/index.ts | 70 ++++++++++++++++++++----------------- src/editor/index.ts | 26 ++++++-------- 2 files changed, 49 insertions(+), 47 deletions(-) diff --git a/src/editor/disable/index.ts b/src/editor/disable/index.ts index d15af1f..7bffedc 100644 --- a/src/editor/disable/index.ts +++ b/src/editor/disable/index.ts @@ -6,41 +6,47 @@ import Editor from '../index' import $, { DomElement } from '../../utils/dom-core' import '../../assets/style/disable.less' -let isCurtain: Boolean = false // 避免重复生成幕布 -let $contentDom: DomElement -let $menuDom: DomElement +export default function disableInit(editor: Editor) { + let isCurtain: Boolean = false // 避免重复生成幕布 + let $contentDom: DomElement + let $menuDom: DomElement -// 创建幕布 -function disable(editor: Editor) { - if (isCurtain) return - // 隐藏编辑区域 - editor.$textElem.hide() - // 生成div 渲染编辑内容 - let textContainerZindexValue = editor.zIndex.get('textContainer') - const content = editor.txt.html() - $contentDom = $( - `
+ // 禁用期间，通过 js 修改内容后，刷新内容 + editor.txt.eventHooks.changeEvents.push(function () { + if (isCurtain) { + $contentDom.find('.w-e-content-preview').html(editor.$textElem.html()) + } + }) + + // 创建幕布 + function disable() { + if (isCurtain) return + // 隐藏编辑区域 + editor.$textElem.hide() + // 生成div 渲染编辑内容 + let textContainerZindexValue = editor.zIndex.get('textContainer') + const content = editor.txt.html() + $contentDom = $( + `
${content}
` - ) - editor.$textContainerElem.append($contentDom) - // 生成div 菜单膜布 - let menuZindexValue = editor.zIndex.get('menu') - $menuDom = $(`
`) - editor.$toolbarElem.append($menuDom) - isCurtain = true -} + ) + editor.$textContainerElem.append($contentDom) + // 生成div 菜单膜布 + let menuZindexValue = editor.zIndex.get('menu') + $menuDom = $(`
`) + editor.$toolbarElem.append($menuDom) + isCurtain = true + } -// 销毁幕布并显示可编辑区域 -function enable(editor: Editor) { - if (!isCurtain) return - $contentDom.remove() - $menuDom.remove() - editor.$textElem.show() - isCurtain = false -} + // 销毁幕布并显示可编辑区域 + function enable() { + if (!isCurtain) return + $contentDom.remove() + $menuDom.remove() + editor.$textElem.show() + isCurtain = false + } -export default { - disable, - enable, + return { disable, enable } } diff --git a/src/editor/index.ts b/src/editor/index.ts index 605029e..ce5ee58 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -18,7 +18,7 @@ import initFullScreen, { setUnFullScreen, setFullScreen } from './init-fns/set-f import ZIndex from './z-index' import Change from './change/index' import History from './history/index' -import disable from './disable' +import disableInit from './disable' // 创建菜单的 class import BtnMenu from '../menus/menu-constructors/BtnMenu' @@ -66,6 +66,12 @@ class Editor { // 实例销毁前需要执行的钩子集合 private beforeDestroyHooks: Function[] = [] + /** 禁用api */ + public disable: Function + + /** 启用api */ + public enable: Function + /** * 构造函数 * @param toolbarSelector 工具栏 DOM selector @@ -101,6 +107,10 @@ class Editor { this.zIndex = new ZIndex() this.change = new Change(this) this.history = new History(this) + + const { disable, enable } = disableInit(this) + this.disable = disable + this.enable = enable } /** @@ -187,20 +197,6 @@ class Editor { public unFullScreen(): void { setUnFullScreen(this) } - - /** - * 禁用api - */ - public disable(): void { - disable.disable(this) - } - - /** - * 启用api - */ - public enable(): void { - disable.enable(this) - } } export default Editor From 298230449f15276975506fe1b54ee1abdad78e3d Mon Sep 17 00:00:00 2001 From: xiaokyo <904656778@qq.com> Date: Thu, 5 Nov 2020 17:01:19 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90setJSON?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/getJSON.html | 13 +++++++++-- src/text/getHtmlByNodeList.ts | 41 +++++++++++++++++++++++++++++++++++ src/text/index.ts | 15 +++++++++++++ src/utils/dom-core.ts | 13 +++++++++++ 4 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 src/text/getHtmlByNodeList.ts diff --git a/examples/getJSON.html b/examples/getJSON.html index 2b099c6..04e4926 100644 --- a/examples/getJSON.html +++ b/examples/getJSON.html @@ -1,5 +1,6 @@ + @@ -7,6 +8,7 @@ +

wangEditor getJSON @@ -15,16 +17,23 @@

我是一行文字

我是一行这里加粗文字

我是一行链接文字

-

+

+ + + \ No newline at end of file diff --git a/src/text/getHtmlByNodeList.ts b/src/text/getHtmlByNodeList.ts new file mode 100644 index 0000000..d417d96 --- /dev/null +++ b/src/text/getHtmlByNodeList.ts @@ -0,0 +1,41 @@ +/** + * @description 从nodeList json格式中遍历生成dom元素 + * @author zhengwenjian + */ + +import $, { DomElement } from './../utils/dom-core' +import { NodeListType } from './getChildrenJSON' + +function getHtmlByNodeList(nodeList: NodeListType): DomElement { + // 设置一个父节点存储所有子节点 + let $root = $(`
`) + + // 遍历节点JSON + nodeList.forEach(item => { + let $elem: DomElement = $('') + + // 当为文本节点时 + if (typeof item === 'string') { + $elem = $(`${item}`) + } + + // 当为普通节点时 + if (typeof item === 'object') { + $elem = $(`<${item.tag}>`) + item.attrs.forEach(attr => { + $elem.attr(attr.name, attr.value) + }) + + // 有子节点时递归将子节点加入当前节点 + if (item.children && item.children.length > 0) { + const $elemChilds = getHtmlByNodeList(item.children).children() + $elemChilds && $elem.append($elemChilds) + } + } + + $root.append($elem) + }) + return $root +} + +export default getHtmlByNodeList diff --git a/src/text/index.ts b/src/text/index.ts index 9c2ad8e..123c6f2 100644 --- a/src/text/index.ts +++ b/src/text/index.ts @@ -8,6 +8,7 @@ import Editor from '../editor/index' import initEventHooks from './event-hooks/index' import { UA, throttle } from '../utils/util' import getChildrenJSON, { NodeListType } from './getChildrenJSON' +import getHtmlByNodeList from './getHtmlByNodeList' import { formatCodeHtml } from '../menus/code' // 各个事件钩子函数 @@ -150,6 +151,20 @@ class Text { editor.initSelection() } + /** + * 将json设置成html至编辑器 + * @param nodeList json格式 + */ + public setJSON(nodeList: NodeListType): void { + const html = getHtmlByNodeList(nodeList).children() + const editor = this.editor + const $textElem = editor.$textElem + // 没有获取到元素的情况 + if (!html) return + // 替换文本节点下全部子节点 + $textElem.replaceChildAll(html) + } + /** * 获取 json 格式的数据 */ diff --git a/src/utils/dom-core.ts b/src/utils/dom-core.ts index c4a35e1..d8e4e4c 100644 --- a/src/utils/dom-core.ts +++ b/src/utils/dom-core.ts @@ -502,6 +502,19 @@ export class DomElement { return $(elem.childNodes) } + /** + * 将子元素全部替换 + * @param $children 新的child节点 + */ + replaceChildAll($children: DomElement): void { + const parent = this.getNode() + const elem = this.elems[0] + while (elem.hasChildNodes()) { + parent.firstChild && elem.removeChild(parent.firstChild) + } + this.append($children) + } + /** * 增加子节点 * @param $children 子节点 From 1797c54a5efed4998581ce609f1a50dc8085dac0 Mon Sep 17 00:00:00 2001 From: wangfupeng Date: Mon, 9 Nov 2020 09:50:38 +0800 Subject: [PATCH 3/3] fix: getJSON example page --- examples/getJSON.html | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/examples/getJSON.html b/examples/getJSON.html index 04e4926..00cfaec 100644 --- a/examples/getJSON.html +++ b/examples/getJSON.html @@ -21,11 +21,15 @@ +