TypeScript Serializer.default函數代碼示例

const setContentString = (editor: Editor, body: HTMLElement, content: string, args: SetContentArgs): string => {
  let forcedRootBlockName, padd;

  // Padd empty content in Gecko and Safari. Commands will otherwise fail on the content
  // It will also be impossible to place the caret in the editor unless there is a BR element present
  if (content.length === 0 || /^\s+$/.test(content)) {
    padd = '<br data-mce-bogus="1">';

    // Todo: There is a lot more root elements that need special padding
    // so separate this and add all of them at some point.
    if (body.nodeName === 'TABLE') {
      content = '<tr><td>' + padd + '</td></tr>';
    } else if (/^(UL|OL)$/.test(body.nodeName)) {
      content = '<li>' + padd + '</li>';
    }

    forcedRootBlockName = Settings.getForcedRootBlock(editor);

    // Check if forcedRootBlock is configured and that the block is a valid child of the body
    if (forcedRootBlockName && editor.schema.isValidChild(body.nodeName.toLowerCase(), forcedRootBlockName.toLowerCase())) {
      content = padd;
      content = editor.dom.createHTML(forcedRootBlockName, editor.settings.forced_root_block_attrs, content);
    } else if (!content) {
      // We need to add a BR when forced_root_block is disabled on non IE browsers to place the caret
      content = '<br data-mce-bogus="1">';
    }

    editor.dom.setHTML(body, content);

    editor.fire('SetContent', args);
  } else {
    if (args.format !== 'raw') {
      content = Serializer({
        validate: editor.validate
      }, editor.schema).serialize(
        editor.parser.parse(content, { isRootContent: true, insert: true })
      );
    }

    args.content = Tools.trim(content);
    editor.dom.setHTML(body, args.content);

    if (!args.no_events) {
      editor.fire('SetContent', args);
    }
  }

  return args.content as string;
};

 const toHtml = function (node) {
   const htmlSerializer = Serializer({});
   return htmlSerializer.serialize(node);
 };

const filterWordContent = function (editor: Editor, content: string) {
  let retainStyleProperties, validStyles;

  retainStyleProperties = Settings.getRetainStyleProps(editor);
  if (retainStyleProperties) {
    validStyles = Tools.makeMap(retainStyleProperties.split(/[, ]/));
  }

  // Remove basic Word junk
  content = Utils.filter(content, [
    // Remove apple new line markers
    /<br class="?Apple-interchange-newline"?>/gi,

    // Remove google docs internal guid markers
    /<b[^>]+id="?docs-internal-[^>]*>/gi,

    // Word comments like conditional comments etc
    /<!--[\s\S]+?-->/gi,

    // Remove comments, scripts (e.g., msoShowComment), XML tag, VML content,
    // MS Office namespaced tags, and a few other tags
    /<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]*>/gi,

    // Convert <s> into <strike> for line-though
    [/<(\/?)s>/gi, '<$1strike>'],

    // Replace nsbp entites to char since it's easier to handle
    [/&nbsp;/gi, '\u00a0'],

    // Convert <span style="mso-spacerun:yes">___</span> to string of alternating
    // breaking/non-breaking spaces of same length
    [/<span\s+style\s*=\s*"\s*mso-spacerun\s*:\s*yes\s*;?\s*"\s*>([\s\u00a0]*)<\/span>/gi,
      function (str, spaces) {
        return (spaces.length > 0) ?
          spaces.replace(/./, ' ').slice(Math.floor(spaces.length / 2)).split('').join('\u00a0') : '';
      }
    ]
  ]);

  const validElements = Settings.getWordValidElements(editor);

  // Setup strict schema
  const schema = Schema({
    valid_elements: validElements,
    valid_children: '-li[p]'
  });

  // Add style/class attribute to all element rules since the user might have removed them from
  // paste_word_valid_elements config option and we need to check them for properties
  Tools.each(schema.elements, function (rule) {
    /*eslint dot-notation:0*/
    if (!rule.attributes.class) {
      rule.attributes.class = {};
      rule.attributesOrder.push('class');
    }

    if (!rule.attributes.style) {
      rule.attributes.style = {};
      rule.attributesOrder.push('style');
    }
  });

  // Parse HTML into DOM structure
  const domParser = DomParser({}, schema);

  // Filter styles to remove "mso" specific styles and convert some of them
  domParser.addAttributeFilter('style', function (nodes) {
    let i = nodes.length, node;

    while (i--) {
      node = nodes[i];
      node.attr('style', filterStyles(editor, validStyles, node, node.attr('style')));

      // Remove pointess spans
      if (node.name === 'span' && node.parent && !node.attributes.length) {
        node.unwrap();
      }
    }
  });

  // Check the class attribute for comments or del items and remove those
  domParser.addAttributeFilter('class', function (nodes) {
    let i = nodes.length, node, className;

    while (i--) {
      node = nodes[i];

      className = node.attr('class');
      if (/^(MsoCommentReference|MsoCommentText|msoDel)$/i.test(className)) {
        node.remove();
      }

      node.attr('class', null);
    }
  });

  // Remove all del elements since we don't want the track changes code in the editor
  domParser.addNodeFilter('del', function (nodes) {
    let i = nodes.length;

//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.core.html.DomParserTest', function (success, failure) {
  const suite = LegacyUnit.createSuite();

  const schema = Schema({ valid_elements: '*[class|title]' });
  const serializer = Serializer({}, schema);
  let parser, root;

  const countNodes = function (node, counter?) {
    let sibling;

    if (!counter) {
      counter = {};
    }

    if (node.name in counter) {
      counter[node.name]++;
    } else {
      counter[node.name] = 1;
    }

    for (sibling = node.firstChild; sibling; sibling = sibling.next) {
      countNodes(sibling, counter);
    }

    return counter;
  };

  schema.addValidChildren('+body[style]');

  suite.test('Parse element', function () {
    let parser, root;

    parser = DomParser({}, schema);
    root = parser.parse('<B title="title" class="class">test</B>');
    LegacyUnit.equal(serializer.serialize(root), '<b class="class" title="title">test</b>', 'Inline element');
    LegacyUnit.equal(root.firstChild.type, 1, 'Element type');
    LegacyUnit.equal(root.firstChild.name, 'b', 'Element name');
    LegacyUnit.deepEqual(
      root.firstChild.attributes, [{ name: 'title', value: 'title' },
      { name: 'class', value: 'class' }],
      'Element attributes'
    );
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'b': 1, '#text': 1 }, 'Element attributes (count)');

    parser = DomParser({}, schema);
    root = parser.parse('  \t\r\n  <SCRIPT>  \t\r\n   a < b > \t\r\n   </S' + 'CRIPT>   \t\r\n  ');
    LegacyUnit.equal(serializer.serialize(root), '<script>  \t\r\n   a < b > \t\r\n   </s' + 'cript>', 'Retain code inside SCRIPT');
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'script': 1, '#text': 1 }, 'Retain code inside SCRIPT (count)');
  });

  suite.test('Whitespace', function () {
    parser = DomParser({}, schema);
    root = parser.parse('  \t\r\n  <B>  \t\r\n   test  \t\r\n   </B>   \t\r\n  ');
    LegacyUnit.equal(serializer.serialize(root), ' <b> test </b> ', 'Redundant whitespace (inline element)');
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'b': 1, '#text': 3 }, 'Redundant whitespace (inline element) (count)');

    parser = DomParser({}, schema);
    root = parser.parse('  \t\r\n  <P>  \t\r\n   test  \t\r\n   </P>   \t\r\n  ');
    LegacyUnit.equal(serializer.serialize(root), '<p>test</p>', 'Redundant whitespace (block element)');
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'p': 1, '#text': 1 }, 'Redundant whitespace (block element) (count)');

    parser = DomParser({}, schema);
    root = parser.parse('  \t\r\n  <SCRIPT>  \t\r\n   test  \t\r\n   </S' + 'CRIPT>   \t\r\n  ');
    LegacyUnit.equal(
      serializer.serialize(root),
      '<script>  \t\r\n   test  \t\r\n   </s' + 'cript>',
      'Whitespace around and inside SCRIPT'
    );
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'script': 1, '#text': 1 }, 'Whitespace around and inside SCRIPT (count)');

    parser = DomParser({}, schema);
    root = parser.parse('  \t\r\n  <STYLE>  \t\r\n   test  \t\r\n   </STYLE>   \t\r\n  ');
    LegacyUnit.equal(serializer.serialize(root), '<style>  \t\r\n   test  \t\r\n   </style>', 'Whitespace around and inside STYLE');
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'style': 1, '#text': 1 }, 'Whitespace around and inside STYLE (count)');

    parser = DomParser({}, schema);
    root = parser.parse('<ul>\n<li>Item 1\n<ul>\n<li>\n \t Indented \t \n</li>\n</ul>\n</li>\n</ul>\n');
    LegacyUnit.equal(
      serializer.serialize(root),
      '<ul><li>Item 1<ul><li>Indented</li></ul></li></ul>',
      'Whitespace around and inside blocks (ul/li)'
    );
    LegacyUnit.deepEqual(countNodes(root), { 'body': 1, 'li': 2, 'ul': 2, '#text': 2 }, 'Whitespace around and inside blocks (ul/li) (count)');

    parser = DomParser({}, Schema({ invalid_elements: 'hr,br' }));
    root = parser.parse(
      '\n<hr />\n<br />\n<div>\n<hr />\n<br />\n<img src="file.gif" data-mce-src="file.gif" />\n<hr />\n<br />\n</div>\n<hr />\n<br />\n'
    );
    LegacyUnit.equal(
      serializer.serialize(root),
      '<div><img src="file.gif" data-mce-src="file.gif" /></div>',
      'Whitespace where SaxParser will produce multiple whitespace nodes'
    );
    LegacyUnit.deepEqual(
      countNodes(root),
      { body: 1, div: 1, img: 1 },
      'Whitespace where SaxParser will produce multiple whitespace nodes (count)'
    );
  });

//.........這裏部分代碼省略.........

const dataToHtml = function (editor, data, head) {
  let headerFragment, headElement, html, elm, value;
  const dom = editor.dom;

  function setAttr(elm, name, value) {
    elm.attr(name, value ? value : undefined);
  }

  function addHeadNode(node) {
    if (headElement.firstChild) {
      headElement.insert(node, headElement.firstChild);
    } else {
      headElement.append(node);
    }
  }

  headerFragment = parseHeader(head);
  headElement = headerFragment.getAll('head')[0];
  if (!headElement) {
    elm = headerFragment.getAll('html')[0];
    headElement = new Node('head', 1);

    if (elm.firstChild) {
      elm.insert(headElement, elm.firstChild, true);
    } else {
      elm.append(headElement);
    }
  }

  // Add/update/remove XML-PI
  elm = headerFragment.firstChild;
  if (data.xml_pi) {
    value = 'version="1.0"';

    if (data.docencoding) {
      value += ' encoding="' + data.docencoding + '"';
    }

    if (elm.type !== 7) {
      elm = new Node('xml', 7);
      headerFragment.insert(elm, headerFragment.firstChild, true);
    }

    elm.value = value;
  } else if (elm && elm.type === 7) {
    elm.remove();
  }

  // Add/update/remove doctype
  elm = headerFragment.getAll('#doctype')[0];
  if (data.doctype) {
    if (!elm) {
      elm = new Node('#doctype', 10);

      if (data.xml_pi) {
        headerFragment.insert(elm, headerFragment.firstChild);
      } else {
        addHeadNode(elm);
      }
    }

    elm.value = data.doctype.substring(9, data.doctype.length - 1);
  } else if (elm) {
    elm.remove();
  }

  // Add meta encoding
  elm = null;
  Tools.each(headerFragment.getAll('meta'), function (meta) {
    if (meta.attr('http-equiv') === 'Content-Type') {
      elm = meta;
    }
  });

  if (data.docencoding) {
    if (!elm) {
      elm = new Node('meta', 1);
      elm.attr('http-equiv', 'Content-Type');
      elm.shortEnded = true;
      addHeadNode(elm);
    }

    elm.attr('content', 'text/html; charset=' + data.docencoding);
  } else if (elm) {
    elm.remove();
  }

  // Add/update/remove title
  elm = headerFragment.getAll('title')[0];
  if (data.title) {
    if (!elm) {
      elm = new Node('title', 1);
      addHeadNode(elm);
    } else {
      elm.empty();
    }

    elm.append(new Node('#text', 3)).value = data.title;
  } else if (elm) {
    elm.remove();
//.........這裏部分代碼省略.........

 const toHtml = (node: Node) => {
   const htmlSerializer = Serializer({});
   return htmlSerializer.serialize(node);
 };