需求：后端使用富文本编辑器导出保存的为json格式，前端根据json内容转换成html赋值给vue 的 v-html,采用前端渲染为了自定义渲染。

搜索官方issues查看相关

• 是否支持json content直接转换成html #4770
• JSON格式的内容怎么正常显示 #1684
• 有木有完整解析json的demo #1569
• html2json #967 V3版本 可以适应微信小程序 --- V3-获取 JSON 格式的内容

通过查询可知：V3 V4(csdn 有分享)可以解决一部分需求.

从V5 版本editor.children开始入手

在wangEditor get HTML DEMO控制台输入editor.children可以得到一个无限嵌套的数组对象。

image.png

尝试自己递归循环

const toRender = (json,root='',block=false)=>{
  let {type,children,text,color,bgColor,fontSize,fontFamily,lineHeight,bold,underline,italic,through,ordered,src,url,sup,sub} = json;
  let childrens = children instanceof Array ? children.map(item=>{ return toRender(item,'',type==='list-item') }).join('') : text;
  switch (type) {
    case 'header1':
      root = `<h1>${childrens}</h1>`
    break;
    case 'header2':
      root = `<h2>${childrens}</h2>`
    break;
    case 'header3':
      root = `<h3>${childrens}</h3>`
    break;
    case 'header4':
      root = `<h4>${childrens}</h4>`
    break;
    case 'header5':
      root = `<h5>${childrens}</h5>`
    break;
    case 'header6':
      root = `<h6>${childrens}</h6>`
    break;
    case 'blockquote':
      root = `<blockquote>${childrens}</blockquote>`
    break;
    case 'paragraph':
      root = `<p>${childrens}</p>`
    break;
   // 这里少个 父级 bulleted-list
    case 'list-item':
      root = ordered ? `<ol>${childrens}</ol>` : `<ul>${childrens}</ul>`;
    break;
    case 'table-cell':
     let {isHeader} = json
      root = isHeader ? `<th>${childrens}</<th>` : `<td>${childrens}</<td>`;
    break;
    case 'table-row':
      root = `<tr>${childrens}</<tr>`;
    break;
    case 'table':
      root = `<table>${childrens}</table>`;
    break;
    case 'image':
      root = `<img src="${src}" alt="" data-href="href">`
    break;
    case 'video':
      root = `<video src="${src}" poster="" data-href="href"></video>`
    break;
    case 'code':
      let {language} = json;
      root = `<code class="language-${language}">${childrens}</<code>`
    break;
    case 'pre':
      root = `<pre>${childrens}</<pre>`
    break;
    case 'divider':
      root = `<hr/>`
    break;
    case 'link':
      root = `<a href="${url}" target="_blank">${childrens}</a>`
    break;
    default: // text 测试
      root = text;
      through && (root = `<s>${root}</s>`);
      italic && (root = `<em>${root}</em>`);
      underline && (root = `<u>${root}</u>`);
      bold && (root = `<strong>${root}</strong>`);
      bold && (root = `<strong>${root}</strong>`);
      sub && (root = `<sub>${root}</sub>`);
      sup && (root = `<sup>${root}</sup>`);
      if(bgColor || color || fontSize){
        let style = '';
        color && (style = `color: ${color};`)
        fontSize && (style = `font-size: ${fontSize};`)
        fontFamily && (style = `font-family: ${fontFamily};`)
        lineHeight && (style = `line-height: ${lineHeight};`)
        bgColor && (style = `background-color: ${bgColor};`)
        root = `<span style="${style}">${root}<span>`
      }
      root = bold ? `<strong>${text}</strong>` : text;
    break;
  }
  return root
}
const html = computed(()=>{
  return props.data.map(item=>toRender(item)).join('')
})

上面代码可以笨笨的渲染成html，在渲染ul ol li 时发现有问题，他有个块的概念

image.png

在从代码入手

• 节点数据结构-wangEditor 是基于 slate.js 为内核开发的，所以学习本文之前，要先了解
  它会有 Text Element Inline Void 这几个概念，而#node-define.html 文档里面的图1
  
  image.png
  
  会有个神奇的bulleted-list他就是ul ol 但是官方demo 就没有bulleted-list

查询代码和历史wangEditor/packages/list-module/src/module/render-elem.tsx
新版去除了bulleted-list和Numbereted-list,改用堆栈嵌套方式，如果要实现ul ol 就需要slate.js的Node源码 使用Iterators_and_Generators迭代器和生成器,在适应一下。
2023-06-26 16:21:05 想到在更