TypeScript Editor.getContainer函数代码示例

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);

    const docBody = Element.fromDom(document.body);

    const sSetTextareaContent = (content) => {
      return Logger.t('Changing textarea content to ' + content, Step.sync(() => {
        const textarea: any = document.querySelector('div[role="dialog"] textarea');
        textarea.value = content;
      }));
    };

    const sAssertTextareaContent = (expected) => {
      return Logger.t('Asserting textarea content is ' + expected, Step.sync(() => {
        const textarea: any = document.querySelector('div[role="dialog"] textarea');
        RawAssertions.assertEq('Should have correct value', expected, textarea.value);
      }));
    };

    const sSubmitDialog = (docBody) => {
      return GeneralSteps.sequence(Logger.ts('Clicking on the Save button to close dialog', [
        FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
        Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000)
      ]));
    };

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Code: Set content in empty editor and assert values', [
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        sAssertTextareaContent(''),
        sSetTextareaContent('<em>a</em>'),
        sSubmitDialog(docBody),
        tinyApis.sAssertContent('<p><em>a</em></p>'),
      ]),

      Log.stepsAsStep('TBA', 'Code: Reopen dialog and check textarea content is correct', [
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        sAssertTextareaContent('<p><em>a</em></p>')
      ]),

      Log.stepsAsStep('TBA', 'Code: Change source code and assert editor content changes', [
        sSetTextareaContent('<strong>b</strong>'),
        sSubmitDialog(docBody),
        tinyApis.sAssertContent('<p><strong>b</strong></p>'),
      ]),
    ], onSuccess, onFailure);
  }, {

export const resize = (editor: Editor, deltas, resizeType: ResizeTypes) => {
  const container = Element.fromDom(editor.getContainer());

  const dimensions = getDimensions(editor, deltas, resizeType, Height.get(container), Width.get(container));
  Obj.each(dimensions, (val, dim) => Css.set(container, dim, Utils.numToPx(val)));
  Events.fireResizeEditor(editor);
};

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
      const uiContainer = Element.fromDom(editor.getContainer());
      const contentAreaContainer = Element.fromDom(editor.getContentAreaContainer());

      const tinyApis = TinyApis(editor);

      Pipeline.async({ }, Arr.flatten([
        sUiContainerTest(editor, uiContainer, tinyApis),
        sContentAreaContainerTest(contentAreaContainer)
      ]), onSuccess, onFailure);
    },

 return Logger.t(`Assert editor height is below ${minHeight}`, Step.sync(() => {
   const editorHeight = editor.getContainer().offsetHeight;
   RawAssertions.assertEq(`should be below: ${editorHeight}<=${minHeight}`, true, editorHeight <= minHeight);
 }));

const resize = (editor: Editor, oldSize: Cell<number>) => {
  let deltaSize, resizeHeight, contentHeight;
  const dom = editor.dom;

  const doc = editor.getDoc();
  if (!doc) {
    return;
  }

  if (isFullscreen(editor)) {
    toggleScrolling(editor, true);
    return;
  }

  const docEle = doc.documentElement;
  const resizeBottomMargin = Settings.getAutoResizeBottomMargin(editor);
  resizeHeight = Settings.getAutoResizeMinHeight(editor);

  // Calculate outer height of the doc element using CSS styles
  const marginTop = parseCssValueToInt(dom, docEle, 'margin-top', true);
  const marginBottom = parseCssValueToInt(dom, docEle, 'margin-bottom', true);
  contentHeight = docEle.offsetHeight + marginTop + marginBottom + resizeBottomMargin;

  // Make sure we have a valid height
  // Note: Previously we had to do some fallbacks here for IE/Webkit, as the height calculation above didn't work.
  //       However using the latest supported browsers (IE 11 & Safari 11), the fallbacks were no longer needed and were removed.
  if (contentHeight < 0) {
    contentHeight = 0;
  }

  // Determine the size of the chroming (menubar, toolbar, etc...)
  const containerHeight = editor.getContainer().offsetHeight;
  const contentAreaHeight = editor.getContentAreaContainer().offsetHeight;
  const chromeHeight = containerHeight - contentAreaHeight;

  // Don't make it smaller than the minimum height
  if (contentHeight + chromeHeight > Settings.getAutoResizeMinHeight(editor)) {
    resizeHeight = contentHeight + chromeHeight;
  }

  // If a maximum height has been defined don't exceed this height
  const maxHeight = Settings.getAutoResizeMaxHeight(editor);
  if (maxHeight && resizeHeight > maxHeight) {
    resizeHeight = maxHeight;
    toggleScrolling(editor, true);
  } else {
    toggleScrolling(editor, false);
  }

  // Resize content element
  if (resizeHeight !== oldSize.get()) {
    deltaSize = resizeHeight - oldSize.get();
    dom.setStyle(editor.getContainer(), 'height', resizeHeight + 'px');
    oldSize.set(resizeHeight);

    // WebKit doesn't decrease the size of the body element until the iframe gets resized
    // So we need to continue to resize the iframe down until the size gets fixed
    if (Env.webkit && deltaSize < 0) {
      resize(editor, oldSize);
    }
  }
};

 Chain.op(() => {
   // Add a border to ensure we're using the correct height/width (ie border-box sizing)
   editor.dom.setStyles(editor.getContainer(), {
     border: '2px solid #ccc'
   });
 }),

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
    const cAssertEditorSize = (expectedWidth: number, expectedHeight: number) => {
      return Chain.control(
        Chain.op((container: Element) => {
          Assertions.assertEq(`Editor should be ${expectedHeight}px high`, expectedHeight, container.dom().offsetHeight);
          Assertions.assertEq(`Editor should be ${expectedWidth}px wide`, expectedWidth, container.dom().offsetWidth);
        }),
        Guard.addLogging('Ensure that the editor has resized')
      );
    };

    const cResizeToPos = (sx: number, sy: number, dx: number, dy: number, delta: number = 10) => {
      // Simulate moving the mouse, by making a number of movements
      const numMoves = sy === dy ? Math.abs(dx - sx) / delta : Math.abs(dy - sy) / delta;
      // Determine the deltas based on the number of moves to make
      const deltaX = (dx - sx) / numMoves;
      const deltaY = (dy - sy) / numMoves;
      // Move and release the mouse
      return Chain.control(
        Chain.fromChains([
            UiFinder.cFindIn('.tox-blocker'),
            Mouse.cMouseMoveTo(sx, sy)
          ].concat(
            Arr.range(numMoves, (count) => {
              const nx = sx + count * deltaX;
              const ny = sy + count * deltaY;
              return Mouse.cMouseMoveTo(nx, ny);
            })
          ).concat([
            Mouse.cMouseMoveTo(dx, dy),
            Mouse.cMouseUp
          ])
        ),
        Guard.addLogging(`Resizing from (${sx}, ${sy}) to (${dx}, ${dy})`)
      );
    };

    Pipeline.async({ }, [
      Chain.asStep(Body.body(), [
        Chain.op(() => {
          // Add a border to ensure we're using the correct height/width (ie border-box sizing)
          editor.dom.setStyles(editor.getContainer(), {
            border: '2px solid #ccc'
          });
        }),
        Chain.label(`Test resize with max/min sizing`, NamedChain.asChain([
          NamedChain.direct(NamedChain.inputName(), Chain.identity, 'body'),
          NamedChain.writeValue('container', Element.fromDom(editor.getContainer())),
          NamedChain.direct('body', UiFinder.cFindIn('.tox-statusbar__resize-handle'), 'resizeHandle'),

          // Shrink to 300px
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(400, 400, 300, 300), '_'),
          NamedChain.direct('container', cAssertEditorSize(300, 300), '_'),

          // Enlarge to 450px
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(300, 300, 450, 450), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 450), '_'),

          // Try to shrink to below min height
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 450, 450, 250), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 300), '_'),

          // Try to enlarge to above max height
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 300, 450, 550), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 500), '_'),

          // Try to shrink to below min width
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 500, 250, 500), '_'),
          NamedChain.direct('container', cAssertEditorSize(300, 500), '_'),

          // Try to enlarge to above max width
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(300, 500, 550, 500), '_'),
          NamedChain.direct('container', cAssertEditorSize(500, 500), '_'),
        ]))
      ])
    ], onSuccess, onFailure);
  },