TypeScript sugar.Html類代碼示例

 NamedChain.write('container', Chain.async((input, n, die) => {
   const container = Element.fromTag('div');
   Attr.set(container, 'id', 'test-container-div');
   Html.set(container, containerHtml);
   Insert.append(Body.body(), container);
   n(container);
 })),

const insert = function (editor, columns, rows) {
  let tableElm;

  const renderedHtml = TableRender.render(rows, columns, 0, 0);

  Attr.set(renderedHtml, 'id', '__mce');

  const html = Html.getOuter(renderedHtml);

  editor.insertContent(html);

  tableElm = editor.dom.get('__mce');
  editor.dom.setAttrib(tableElm, 'id', null);

  editor.$('tr', tableElm).each(function (index, row) {
    editor.fire('newrow', {
      node: row
    });

    editor.$('th,td', row).each(function (index, cell) {
      editor.fire('newcell', {
        node: cell
      });
    });
  });

  editor.dom.setAttribs(tableElm, editor.settings.table_default_attributes || {});
  editor.dom.setStyles(tableElm, editor.settings.table_default_styles || {});

  selectFirstCellInTable(editor, Element.fromDom(tableElm));

  return tableElm;
};

  const setContents = (comp, items) => {
    const htmlLines = Arr.map(items, (item) => {
      const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${item.text}</div>` : '';

      const iconContent = `<div class="tox-collection__item-icon">${item.icon}</div>`;

      // Replacing the hyphens and underscores in collection items with spaces
      // to ensure the screen readers pronounce the words correctly.
      // This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion.
      const mapItemName = {
        '_': ' ',
        ' - ': ' ',
        '-': ' '
      };

      // Title attribute is added here to provide tooltips which might be helpful to sighted users.
      // Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows.
      // But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text.
      const ariaLabel = item.text.replace(/\_| \- |\-/g, (match) => {
        return mapItemName[match];
      });
      return `<div class="tox-collection__item" tabindex="-1" data-collection-item-value="${escapeAttribute(item.value)}" title="${ariaLabel}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`;
    });

    const chunks = spec.columns > 1 && spec.columns !== 'auto' ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ];
    const html = Arr.map(chunks, (ch) => {
      return `<div class="tox-collection__group">${ch.join('')}</div>`;
    });

    Html.set(comp.element(), html.join(''));
  };

 Chain.op((dialog) => {
   if (Attr.has(dialog, 'aria-labelledby')) {
     const labelledby = Attr.get(dialog, 'aria-labelledby');
     const dialogLabel = SelectorFind.descendant(dialog, '#' + labelledby).getOrDie('Could not find labelledby');
     Assertions.assertEq('Checking label text', ariaLabel, Html.get(dialogLabel));
   } else {
     throw new Error('Dialog did not have an aria-labelledby');
   }
 })

  return Step.stateful(function (value, next, die) {
    const style = Element.fromTag('style');
    const head = Element.fromDom(doc.dom().head);
    Insert.append(head, style);
    Html.set(style, styles.join('\n'));

    next(Merger.deepMerge(value, {
      style
    }));
  });

 const assertPath = function (label, root, expPath, expOffset, actElement, actOffset) {
   const expected = Cursors.calculateOne(root, expPath);
   const message = function () {
     const actual = Element.fromDom(actElement);
     const actPath = Hierarchy.path(root, actual).getOrDie('could not find path to root');
     return 'Expected path: ' + JSON.stringify(expPath) + '.\nActual path: ' + JSON.stringify(actPath);
   };
   Assertions.assertEq('Assert incorrect for ' + label + '.\n' + message(), true, expected.dom() === actElement);
   Assertions.assertEq('Offset mismatch for ' + label + ' in :\n' + Html.getOuter(expected), expOffset, actOffset);
 };

    return Step.sync(function () {
      const element = Replication.deep(Element.fromDom(editor.getBody()));

      // Remove internal selection dom items
      Arr.each(SelectorFilter.descendants(element, '*[data-mce-bogus="all"]'), Remove.remove);
      Arr.each(SelectorFilter.descendants(element, '*'), function (elm) {
        Attr.remove(elm, 'data-mce-selected');
      });

      Assertions.assertHtml('Should be expected contents', expectedContent, Html.get(element));
    });

  editor.undoManager.transact(() => {
    const initialRng = editor.selection.getRng();
    if (initialRng.collapsed) {
      applyWordGrab(editor, initialRng);
    }

    // Even after applying word grab, we could not find a selection. Therefore,
    // just make a wrapper and insert it at the current cursor
    if (editor.selection.getRng().collapsed)  {
      const wrapper = makeAnnotation(editor.getDoc(), data, name, settings.decorate);
      // Put something visible in the marker
      Html.set(wrapper, '\u00A0');
      editor.selection.getRng().insertNode(wrapper.dom());
      editor.selection.select(wrapper.dom());
    } else {
      // The bookmark is responsible for splitting the nodes beforehand at the selection points
      // The "false" here means a zero width cursor is NOT put in the bookmark. It seems to be required
      // to stop an empty paragraph splitting into two paragraphs. Probably a better way exists.
      const bookmark = GetBookmark.getPersistentBookmark(editor.selection, false);
      const rng = editor.selection.getRng();
      annotate(editor, rng, name, settings.decorate, data);
      editor.selection.moveToBookmark(bookmark);
    }
  });

const insert = (editor: Editor, columns: number, rows: number): HTMLElement => {
  const defaultStyles = getDefaultStyles(editor);
  const options: TableRender.RenderOptions = {
    styles: defaultStyles,
    attributes: getDefaultAttributes(editor),
    percentages: isPercentage(defaultStyles.width) && !isPixelsForced(editor)
  };

  const table = TableRender.render(rows, columns, 0, 0, options);
  Attr.set(table, 'data-mce-id', '__mce');

  const html = Html.getOuter(table);
  editor.insertContent(html);

  return SelectorFind.descendant(Util.getBody(editor), 'table[data-mce-id="__mce"]').map((table) => {
    if (isPixelsForced(editor)) {
      Css.set(table, 'width', Css.get(table, 'width'));
    }
    Attr.remove(table, 'data-mce-id');
    fireEvents(editor, table);
    selectFirstCellInTable(editor, table);
    return table.dom();
  }).getOr(null);
};

 const getFragmentHtml = function (fragment) {
   const elm = Element.fromTag('div');
   Insert.append(elm, fragment);
   return Html.get(elm);
 };