TypeScript UiContainer.setUiContainer函數代碼示例

  const showContextToolbar = function (match) {
    let panel;

    if (match.toolbar.panel) {
      match.toolbar.panel.show();
      reposition(match);
      return;
    }

    panel = Factory.create({
      type: 'floatpanel',
      role: 'dialog',
      classes: 'tinymce tinymce-inline arrow',
      ariaLabel: 'Inline toolbar',
      layout: 'flex',
      direction: 'column',
      align: 'stretch',
      autohide: false,
      autofix: true,
      fixed: true,
      border: 1,
      items: Toolbar.createToolbar(editor, match.toolbar.items),
      oncancel () {
        editor.focus();
      }
    });

    UiContainer.setUiContainer(editor, panel);
    bindScrollEvent(panel);

    match.toolbar.panel = panel;
    panel.renderTo().reflow();
    reposition(match);
  };

  const render = function () {
    if (panel) {
      if (!panel.visible()) {
        show();
      }

      return;
    }

    // Render a plain panel inside the inlineToolbarContainer if it's defined
    panel = theme.panel = Factory.create({
      type: inlineToolbarContainer ? 'panel' : 'floatpanel',
      role: 'application',
      classes: 'tinymce tinymce-inline',
      layout: 'flex',
      direction: 'column',
      align: 'stretch',
      autohide: false,
      autofix: isFixed(inlineToolbarContainer, editor),
      fixed: isFixed(inlineToolbarContainer, editor),
      border: 1,
      items: [
        Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
        Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
      ]
    });

    UiContainer.setUiContainer(editor, panel);

    // Add statusbar
    /*if (settings.statusbar !== false) {
      panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
        {type: 'elementpath'}
      ]});
    }*/

    Events.fireBeforeRenderUI(editor);

    if (inlineToolbarContainer) {
      panel.renderTo(inlineToolbarContainer).reflow();
    } else {
      panel.renderTo().reflow();
    }

    A11y.addKeys(editor, panel);
    show();
    ContextToolbars.addContextualToolbars(editor);

    editor.on('nodeChange', reposition);
    editor.on('ResizeWindow', reposition);
    editor.on('activate', show);
    editor.on('deactivate', hide);

    editor.nodeChanged();
  };

const render = function (editor, theme, args) {
  let panel, resizeHandleCtrl, startSize;

  if (Settings.isSkinDisabled(editor) === false && args.skinUiCss) {
    DOM.styleSheetLoader.load(args.skinUiCss, SkinLoaded.fireSkinLoaded(editor));
  } else {
    SkinLoaded.fireSkinLoaded(editor)();
  }

  panel = theme.panel = Factory.create({
    type: 'panel',
    role: 'application',
    classes: 'tinymce',
    style: 'visibility: hidden',
    layout: 'stack',
    border: 1,
    items: [
      {
        type: 'container',
        classes: 'top-part',
        items: [
          Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
          Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
        ]
      },
      Sidebar.hasSidebar(editor) ? editAreaContainer(editor) : editArea('1 0 0 0')
    ]
  });

  UiContainer.setUiContainer(editor, panel);

  if (Settings.getResize(editor) !== 'none') {
    resizeHandleCtrl = {
      type: 'resizehandle',
      direction: Settings.getResize(editor),

      onResizeStart () {
        const elm = editor.getContentAreaContainer().firstChild;

        startSize = {
          width: elm.clientWidth,
          height: elm.clientHeight
        };
      },

      onResize (e) {
        if (Settings.getResize(editor) === 'both') {
          Resize.resizeTo(editor, startSize.width + e.deltaX, startSize.height + e.deltaY);
        } else {
          Resize.resizeTo(editor, null, startSize.height + e.deltaY);
        }
      }
    };
  }

  if (Settings.hasStatusbar(editor)) {
    const linkHtml = '<a href="https://www.tiny.cloud/?utm_campaign=editor_referral&amp;utm_medium=poweredby&amp;utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">Tiny</a>';
    const html = I18n.translate(['Powered by {0}', linkHtml]);
    const brandingLabel = Settings.isBrandingEnabled(editor) ? { type: 'label', classes: 'branding', html: ' ' + html } : null;

    panel.add({
      type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
        { type: 'elementpath', editor },
        resizeHandleCtrl,
        brandingLabel
      ]
    });
  }

  Events.fireBeforeRenderUI(editor);
  editor.on('SwitchMode', switchMode(panel));
  panel.renderBefore(args.targetNode).reflow();

  if (Settings.isReadOnly(editor)) {
    editor.setMode('readonly');
  }

  if (args.width) {
    DOM.setStyle(panel.getEl(), 'width', args.width);
  }

  // Remove the panel when the editor is removed
  editor.on('remove', function () {
    panel.remove();
    panel = null;
  });

  // Add accesibility shortcuts
  A11y.addKeys(editor, panel);
  ContextToolbars.addContextualToolbars(editor);

  return {
    iframeContainer: panel.find('#iframe')[0].getEl(),
    editorContainer: panel.getEl()
  };
};