Merge pull request #2426 from wangeditor-team/dev

release
2020-11-09 09:52:34 +08:00 · 2020-11-09 09:52:34 +08:00 · 218b580a3b
parent be290c162d 1797c54a5e
commit 218b580a3b
6 changed files with 165 additions and 49 deletions
--- a/examples/getJSON.html
+++ b/examples/getJSON.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,6 +8,7 @@
    <style>
    </style>
 </head>
+
 <body>
    <p>
        wangEditor getJSON
@ -15,16 +17,59 @@
        <p>我是一行文字</p>
        <p>我是一行<b>这里加粗</b>文字</p>
        <p>我是一行<a href="123" target="_blank">链接</a>文字</p>
-        <p><img src="https://www.tslang.cn/assets/images/fork_me_ribbon.svg" style="width: 200px;"/></p>
+        <p><img src="https://www.tslang.cn/assets/images/fork_me_ribbon.svg" style="width: 200px;" /></p>
    </div>

+    <button onclick="setJsonOne()">setJSON</button>
+    <button onclick="setJsonTwo()">setJSON（自定义 JSON）</button>
+
    <script src="../dist/wangEditor.js"></script>
    <script>
        const E = window.wangEditor
        const editor = new E('#div1')
+        editor.config.onchange = function (newHtml) {
+            console.log('onchange', newHtml)
+        }
        editor.create()

-        console.log( editor.txt.getJSON() )
+        console.log(editor.txt.getJSON())
+        let myJson = editor.txt.getJSON()
+        function setJsonOne() {
+            editor.txt.setJSON(myJson)
+        }
+
+        function setJsonTwo() {
+            editor.txt.setJSON([
+                {
+                    "tag": "p",
+                    "attrs": [],
+                    "children": [
+                        "欢迎使用 ",
+                        {
+                            "tag": "b",
+                            "attrs": [],
+                            "children": [ "wangEditor" ]
+                        },
+                        " 富文本编辑器"
+                    ]
+                },
+                {
+                    "tag": "p",
+                    "attrs": [],
+                    "children": [
+                        {
+                            "tag": "img",
+                            "attrs": [
+                                { "name": "src", "value": "xxx.png" },
+                                { "name": "style", "value": "max-width:100%;" }
+                            ],
+                            "children": []
+                        }
+                    ]
+                }
+            ])
+        }
    </script>
 </body>
+
 </html>
--- 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 = $(
-        `<div class="w-e-content-mantle" style="z-index:${textContainerZindexValue}">
+    // 禁用期间，通过 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 = $(
+            `<div class="w-e-content-mantle" style="z-index:${textContainerZindexValue}">
                <div class="w-e-content-preview w-e-text">${content}</div>
            </div>`
-    )
-    editor.$textContainerElem.append($contentDom)
-    // 生成div 菜单膜布
-    let menuZindexValue = editor.zIndex.get('menu')
-    $menuDom = $(`<div class="w-e-menue-mantle" style="z-index:${menuZindexValue}"></div>`)
-    editor.$toolbarElem.append($menuDom)
-    isCurtain = true
-}
+        )
+        editor.$textContainerElem.append($contentDom)
+        // 生成div 菜单膜布
+        let menuZindexValue = editor.zIndex.get('menu')
+        $menuDom = $(`<div class="w-e-menue-mantle" style="z-index:${menuZindexValue}"></div>`)
+        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 }
 }
--- 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
--- a/src/text/getHtmlByNodeList.ts
+++ 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 = $(`<div></div>`)
+
+    // 遍历节点JSON
+    nodeList.forEach(item => {
+        let $elem: DomElement = $('')
+
+        // 当为文本节点时
+        if (typeof item === 'string') {
+            $elem = $(`<span>${item}</span>`)
+        }
+
+        // 当为普通节点时
+        if (typeof item === 'object') {
+            $elem = $(`<${item.tag}></${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
--- 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 格式的数据
     */
--- 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 子节点