在slatejs编辑器中反序列化嵌套的html

Question

如何将嵌套的html元素反序列化为与Slate兼容的JSON结构。有什么需要帮忙的吗？我已经用文档中的反序列化()函数尝试了slate-hyperscript，但它不起作用。下面是我的示例html

<p><u><em><strong>Our S</strong></em></u><strong>ervi</strong><u><em><strong>ce</strong></em></u><em><strong>s </strong></em><em>A</em><u><em>nd</em></u><u><em><strong> </strong></em></u>Mo<u><em><strong>re</strong></em></u></p>

Answer 1

以下是我的解决方案：

import { jsx } from 'slate-hyperscript';

const deserialize = el => {
  if (el.nodeType === 3) {
    return el.textContent;
  }
  if (el.nodeType !== 1) {
    return null;
  }

  let children = Array.from(el.childNodes).map(deserialize);

  if (children.length === 0) {
    children = [{ text: '' }];
  }

  switch (el.nodeName) {
    // Elements:
    case 'BODY':
      return jsx('fragment', {}, children);
    case 'P':
      return jsx('element', { type: paragraph }, children);
    case 'H1':
      return jsx('element', { type: heading-one }, children);
    case 'H2':
      return jsx('element', { type: heading-two }, children);

    // Leafs:
    case 'STRONG':
      return { text: el.textContent, bold: true };
    case 'EM':
      return { text: el.textContent, italic: true };
    case 'U':
      return { text: el.textContent, underline: true };

    default:
      return el.textContent;
  }
};

const deserializeFromHtml = html => {
  const document = new window.DOMParser().parseFromString(html, 'text/html');
  return deserialize(document.body);
};