TypeScript Editor.cFromHtml方法代碼示例

UnitTest.asynctest('browser.tinymce.core.InlineEditorSaveTest', (success, failure) =>  {
  Theme();

  const settings = {
    inline: true,
    base_url: '/project/tinymce/js/tinymce'
  };

  const cAssertBogusExist = Chain.async((val, next, die) => {
    UiFinder.findIn(Body.body(), '[data-mce-bogus]').fold(
      () => {
        die('Should be data-mce-bogus tags present');
      },
      () => {
        next(val);
      }
    );
  });

  const cSaveEditor = Chain.op((editor: Editor) => editor.save());

  Pipeline.async({}, [
    Logger.t('Saving inline editor should not remove data-mce-bogus tags', Chain.asStep({}, [
        McEditor.cFromHtml('<div></div>', settings),
        ApiChains.cSetRawContent('<p data-mce-bogus="all">b</p><p data-mce-bogus="1">b</p>'),
        cSaveEditor,
        cAssertBogusExist,
        McEditor.cRemove,
      ]),
    )
  ], function () {
    success();
  }, failure);
});

 const sCreateInlineEditor = function (html) {
   return Chain.asStep({}, [
     McEditor.cFromHtml(html, {
       inline: true,
       base_url: '/project/tinymce/js/tinymce'
     })
   ]);
 };

 const cCreateEditorFromSettings = function (settings?, html?) {
   return Chain.control(
     McEditor.cFromHtml(html, Merger.merge(settings || {}, {
       add_unload_trigger: false,
       indent: false,
       plugins: 'paste',
       base_url: '/project/tinymce/js/tinymce'
     })),
     Guard.addLogging(`Create editor using settings ${settings}`)
   );
 };

UnitTest.asynctest('browser.tinymce.core.init.InitEditorOnHiddenElementTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Theme();

  // Firefox specific test, errors were thrown when the editor was initialised on hidden element.
  Chain.pipeline([
    Editor.cFromHtml('<textarea style="display:none;"></textarea>', {
      base_url: '/project/tinymce/js/tinymce'
    }),
    ApiChains.cFocus
  ],
  function () {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.core.content.EditorContentWsTest', (success, failure) => {
  ModernTheme();

  Pipeline.async({}, [
    Logger.t('Editor initialized on pre element should retain whitespace on get/set content', Chain.asStep({}, [
      Editor.cFromHtml('<pre>  a  </pre>', {
        inline: true,
        skin_url: '/project/js/tinymce/skins/lightgray'
      }),
      ApiChains.cAssertContent('  a  '),
      ApiChains.cSetContent('  b  '),
      ApiChains.cAssertContent('  b  '),
      Editor.cRemove
    ]))
  ], function () {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.core.keyboard.EnterKeyInlineTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Theme();

  const settings = {
    skin_url: '/project/js/tinymce/skins/lightgray',
    inline: true
  };

  Pipeline.async({}, [
    Logger.t('Pressing shift+enter in brMode inside a h1 should insert a br', Chain.asStep({}, [
      Editor.cFromHtml('<h1>ab</h1>', Merger.merge(settings, { forced_root_block: false })),
      ApiChains.cFocus,
      ApiChains.cSetCursor([0], 1),
      ActionChains.cContentKeystroke(Keys.enter(), { shift: true }),
      ApiChains.cAssertContent('a<br />b'),
      Editor.cRemove
    ]))
  ], function () {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.core.EditorRemoveTest', (success, failure) => {
  Theme();

  const settings = {
    base_url: '/project/tinymce/js/tinymce'
  };

  const cAssertTextareaDisplayStyle = (expected) => Chain.op((editor: any) => {
    const textareaElement = editor.getElement();

    RawAssertions.assertEq('element does not have the expected style', expected, textareaElement.style.display);
  });

  const cCreateEditor = Chain.mapper(() => new Editor('editor', {}, EditorManager));

  const cRemoveEditor = Chain.op((editor: any) => editor.remove());

  Pipeline.async({}, [
    Logger.t('remove editor without initializing it', Chain.asStep({}, [
      cCreateEditor,
      cRemoveEditor,
    ])),

    Logger.t('remove editor where the body has been removed', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea></textarea>', settings),
      Chain.mapper((value) => {
        const body = value.getBody();
        body.parentNode.removeChild(body);
        return value;
      }),
      McEditor.cRemove
    ])),

    Logger.t('init editor with no display style', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea id="tinymce"></textarea>', settings),
      cAssertTextareaDisplayStyle('none'),
      cRemoveEditor,
      cAssertTextareaDisplayStyle(''),
      Chain.op((editor) => EditorManager.init({ selector: '#tinymce' })),
      cAssertTextareaDisplayStyle(''),
      McEditor.cRemove
    ])),

    Logger.t('init editor with display: none', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea id="tinymce" style="display: none;"></textarea>', settings),
      cAssertTextareaDisplayStyle('none'),
      cRemoveEditor,
      cAssertTextareaDisplayStyle('none'),
      Chain.op((editor) => EditorManager.init({ selector: '#tinymce' })),
      cAssertTextareaDisplayStyle('none'),
      McEditor.cRemove
    ])),

    Logger.t('init editor with display: block', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea id="tinymce" style="display: block;"></textarea>', settings),
      cAssertTextareaDisplayStyle('none'),
      cRemoveEditor,
      cAssertTextareaDisplayStyle('block'),
      Chain.op((editor) => EditorManager.init({ selector: '#tinymce' })),
      cAssertTextareaDisplayStyle('block'),
      McEditor.cRemove
    ]))
  ], () => {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.core.content.EditorContentNotInitializedTest', (success, failure) => {
  Theme();

  const settings = {
    skin_url: '/project/js/tinymce/skins/lightgray'
  };

  const cCreateEditor = Chain.mapper((_) => new Editor('editor', {}, EditorManager));

  const cSetContentAndAssertReturn = (content) => Chain.op((editor: any) => {
    const actual = editor.setContent(content);

    RawAssertions.assertEq('should return what you tried to set', content, actual);
  });
  const cGetAndAssertContent = (expected, tree?) => Chain.op((editor: any) => {
    const actual = tree ? editor.getContent({format: 'tree'}) : editor.getContent();

    RawAssertions.assertEq('content should be equal', expected, actual);
  });

  const cRemoveBodyElement = Chain.op((editor: any) => {
    const body = editor.getBody();
    body.parentNode.removeChild(body);
  });

  Pipeline.async({}, [
    Logger.t('set content on editor without initializing it', Chain.asStep({}, [
      cCreateEditor,
      cSetContentAndAssertReturn('hello'),
      McEditor.cRemove
    ])),

    Logger.t('set content on editor where the body has been removed', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea></textarea>', settings),
      cRemoveBodyElement,
      cSetContentAndAssertReturn('hello'),
      McEditor.cRemove
    ])),

    Logger.t('get content on editor without initializing it', Chain.asStep({}, [
      cCreateEditor,
      cGetAndAssertContent(''),
      McEditor.cRemove
    ])),

    Logger.t('get content on editor where the body has been removed', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea></textarea>', settings),
      cRemoveBodyElement,
      cGetAndAssertContent(''),
      McEditor.cRemove
    ])),

    Logger.t('set tree content on editor without initializing it', Chain.asStep({}, [
      cCreateEditor,
      cSetContentAndAssertReturn(new Node('p', 1)),
      McEditor.cRemove,
    ])),

    Logger.t('set tree content on editor where the body has been removed', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea></textarea>', settings),
      cRemoveBodyElement,
      cSetContentAndAssertReturn(new Node('p', 1)),
      McEditor.cRemove
    ])),

    Logger.t('get tree content on editor without initializing it', Chain.asStep({}, [
      cCreateEditor,
      cGetAndAssertContent(new Node('body', 11), true),
      McEditor.cRemove
    ])),

    Logger.t('get tree content on editor where the body has been removed', Chain.asStep({}, [
      McEditor.cFromHtml('<textarea></textarea>', settings),
      cRemoveBodyElement,
      cGetAndAssertContent(new Node('body', 11), true),
      McEditor.cRemove
    ]))
  ], () => {
    success();
  }, failure);
});

UnitTest.asynctest('Remove context menu on focusout', (success, failure) => {
  Theme();

  const inputElmCell = Cell<Element>(null);
  const sAddInput = Step.sync(() => {
    const input = Element.fromTag('input');
    inputElmCell.set(input);

    Insert.append(Body.body(), input);
  });

  const sRemoveInput = Step.sync(() => {
    Remove.remove(inputElmCell.get());
  });

  const cFocusInput = Chain.op(() => {
    Focus.focus(inputElmCell.get());
  });

  const cWaitForContextmenuState = (state: boolean) => Chain.control(
    Chain.op(() => {
      const contextToolbar = UiFinder.findIn(Body.body(), '.tox-pop');

      Assertions.assertEq('no context toolbar', state, contextToolbar.isValue());
    }),
    Guard.tryUntil('Wait for context menu to appear.', 100, 3000)
  );

  const html = '<p>One <a href="http://tiny.cloud">link</a> Two</p>';

  const setup = (ed: Editor) => {
    ed.ui.registry.addButton('alpha', {
      text: 'Alpha',
      onAction: Fun.noop
    });
    ed.ui.registry.addContextToolbar('test-toolbar', {
      predicate: (node) => {
        return node.nodeName && node.nodeName.toLowerCase() === 'a'; },
      items: 'alpha'
    });
  };

  Pipeline.async({}, [
    sAddInput,
    Logger.t('iframe editor focusout should remove context menu', Chain.asStep({}, [
      McEditor.cFromHtml(html, { setup, base_url: '/project/tinymce/js/tinymce' }),
      ApiChains.cFocus,
      ApiChains.cSetCursor([ 0, 1, 0 ], 1),
      cWaitForContextmenuState(true),
      cFocusInput,
      cWaitForContextmenuState(false),
      McEditor.cRemove
    ])),
    Logger.t('inline editor focusout should remove context menu', Chain.asStep({}, [
      McEditor.cFromHtml(html, { setup, inline: true, base_url: '/project/tinymce/js/tinymce' }),
      ApiChains.cFocus,
      ApiChains.cSetCursor([ 1, 0 ], 1),
      cWaitForContextmenuState(true),
      cFocusInput,
      cWaitForContextmenuState(false),
      McEditor.cRemove
    ])),
    sRemoveInput
  ], () => success(), failure);
});

 const cCreateInlineEditor = function (html) {
   return McEditor.cFromHtml(html, {
     inline: true,
     base_url: '/project/tinymce/js/tinymce'
   });
 };