wangEditor JSON格式数据展示

本文主要是将v4版本中以JSON格式存储的数据，显示到其他区域中。

1. 前言

wangEditor提供了getJSON()方法获取编辑器内容的JSON格式数据，而 v4版本新增了通过JSON设置编辑器默认内容的API，如图：

从而我们可以将编辑的内容以JSON格式存储在服务端中，便于后期的维护和跟踪。但是在将JSON数据内容进行显示时遇到了麻烦，需要将数据转换成浏览器DOM对象或者html字符串才能加载出来。

一开始想wangEditor可能有提供此类api进行转换，结果没找到。然后想到自己手撸转换方法，太麻烦，而开源第三方转换库（html2json）也不太兼容，需要改源码。最后想到，既然wangEditor能将JSON的数据进行回显，那内部肯定实现了一套转换逻辑，于是便有了本文（解决方法看第三节）。

2. wangEditor 源码剖析

（可跳过）直接从setJSON方法入手。根据editor.txt.setJSON这个引用链，沿着入口，一路找到了text/index.ts文件，找到了setJSON方法，如下图：

const html = getHtmlByNodeList(nodeList).children() 这一行比较明显，进入方法看到返回的是一个自定义的DomElement，

很明显，这个elems属性就是原生的HTMLElement（含有innerHTML属性），方法就有了

3. 最终实现方法

import getHtmlByNodeList from 'wangeditor/src/text/getHtmlByNodeList';
import { NodeListType } from 'wangeditor/src/text/getChildrenJSON';
import $, { DomElement } from 'wangeditor/src/utils/dom-core';

export const json2html = (nodeList: NodeListType): string => {
    const node: DomElement = getHtmlByNodeList(nodeList).children();
    if (!node) return '';
    const $textElem = $('<div></div>');
    $textElem.replaceChildAll(node);
    return $textElem.elems[0].innerHTML;
};

这个方法需要依赖wangEditor，如果别的项目没有集成wangEditor，但需要使用此功能，可以将核心代码提取出来封装。