TypeScript Editor.cFromSettings方法代码示例

UnitTest.asynctest('browser.tinymce.plugins.autosave.ShouldRestoreWhenEmptyTest', (success, failure) => {
  Theme();
  Plugin();

  const cAssertHasDraft = (expected: boolean) => Chain.op((editor: Editor) => {
    RawAssertions.assertEq(`should${!expected ? 'n\'t' : ''} have draft`, expected, editor.plugins.autosave.hasDraft());
  });

  const cStoreDraft = Chain.op((editor: Editor) => {
    editor.plugins.autosave.storeDraft();
  });

  const cRemoveDraft = Chain.op((editor: Editor) => {
    editor.plugins.autosave.removeDraft();
  });

  const cAddUndoLevel = Chain.op((editor: Editor) => {
    editor.undoManager.add();
  });

  const testingPrefix = Math.random().toString(36).substring(7);
  Pipeline.async({}, [
    Logger.t('should restore draft when empty with setting', Chain.asStep({}, [
      McEditor.cFromSettings({ skin_url: '/project/js/tinymce/skins/lightgray', plugins: 'autosave', autosave_prefix: testingPrefix }),
      cAssertHasDraft(false),
      ApiChains.cSetContent('<p>X</p>'),
      cAddUndoLevel,
      cStoreDraft,
      cAssertHasDraft(true),
      McEditor.cRemove,
      McEditor.cFromSettings({ autosave_restore_when_empty: true, skin_url: '/project/js/tinymce/skins/lightgray', plugins: 'autosave', autosave_prefix: testingPrefix }),
      cAssertHasDraft(true),
      ApiChains.cAssertContent('<p>X</p>'),
      cRemoveDraft,
      McEditor.cRemove
    ])),
    Logger.t('shouldn\'t restore draft when empty without setting', Chain.asStep({}, [
      McEditor.cFromSettings({ skin_url: '/project/js/tinymce/skins/lightgray', plugins: 'autosave', autosave_prefix: testingPrefix }),
      cAssertHasDraft(false),
      ApiChains.cSetContent('<p>X</p>'),
      cAddUndoLevel,
      cStoreDraft,
      cAssertHasDraft(true),
      McEditor.cRemove,
      McEditor.cFromSettings({ skin_url: '/project/js/tinymce/skins/lightgray', plugins: 'autosave', autosave_prefix: testingPrefix }),
      cAssertHasDraft(true),
      ApiChains.cAssertContent(''),
      cRemoveDraft,
      McEditor.cRemove
    ]))
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.media.NoAdvancedTabTest', (success, failure) => {
  Plugin();
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Media: if alt source and poster set to false, do not show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          media_alt_source: false,
          media_poster: false,
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cNotExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ]),
    Log.chainsAsStep('TBA', 'Media: if alt source and poster not set to false, show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ])
  ], () => success(), failure);

});

UnitTest.asynctest('Default image dialog on empty data', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: default image dialog on empty data', [
      Editor.cFromSettings(silverSettings),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      Chain.fromParent(Chain.identity, [
        cAssertInputValue(generalTabSelectors.src, ''),
        cAssertInputValue(generalTabSelectors.alt, ''),
        cAssertInputValue(generalTabSelectors.height, ''),
        cAssertInputValue(generalTabSelectors.width, '')
      ]),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt',
        dimensions: {
          width: '200',
          height: '100'
        }
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="src" alt="alt" width="200" height="100" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('Image recognizes relative src url and prepends relative image_prepend_url setting.', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  const prependUrl = 'testing/images/';
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: image recognizes relative src url and prepends relative image_prepend_url setting.', [
      Editor.cFromSettings({
        ...silverSettings,
        image_prepend_url: prependUrl
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt'
      }),
      cOpFromChains([
        Chain.inject(Body.body()),
        UiFinder.cFindIn(generalTabSelectors.src),
        cFakeEvent('change')
      ]),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="' + prependUrl + 'src" alt="alt" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.media.NoAdvancedTabTest', (success, failure) => {
  Plugin();
  Theme();

  Pipeline.async({}, [
    Logger.t('if alt source and poster set to false, do not show advance tab', Chain.asStep({}, [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          media_alt_source: false,
          media_poster: false,
          skin_url: '/project/js/tinymce/skins/lightgray'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'div[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.mce-floatpanel[aria-label="Insert/edit media"]'),
            cNotExists('div.mce-tab:contains("Advanced")')
          ]),
          Editor.cRemove
        ]
      )
    ])),
    Logger.t('if alt source and poster not set to false, show advance tab', Chain.asStep({}, [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          skin_url: '/project/js/tinymce/skins/lightgray'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'div[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.mce-floatpanel[aria-label="Insert/edit media"]'),
            cExists('div.mce-tab:contains("Advanced")')
          ]),
          Editor.cRemove
        ]
      )
    ]))
  ], () => success(), failure);

});

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

 const cCreateInlineEditor = function (settings) {
   return Chain.control(
     McEditor.cFromSettings(Merger.merge(settings, {
       inline: true,
       base_url: '/project/tinymce/js/tinymce'
     })),
     Guard.addLogging('Create inline editor')
   );
 };

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

  const cAssertCorsLinkPresence = (expected: boolean) => Chain.op((editor: Editor) => {
    const corsLinks = editor.getDoc().querySelectorAll('link[crossorigin="anonymous"]');
    RawAssertions.assertEq('should have link with crossorigin="anonymous"', expected, corsLinks.length > 0);
  });

  Pipeline.async({}, Env.ie < 12 ? [] : [
    Logger.t('assert crossorigin link presence with setting set', Chain.asStep({}, [
      McEditor.cFromSettings({ content_css_cors: true, skin_url: '/project/js/tinymce/skins/lightgray' }),
      cAssertCorsLinkPresence(true),
      McEditor.cRemove
    ])),
    Logger.t('assert crossorigin link presence with no setting set', Chain.asStep({}, [
      McEditor.cFromSettings({ skin_url: '/project/js/tinymce/skins/lightgray' }),
      cAssertCorsLinkPresence(false),
      McEditor.cRemove
    ]))
  ], () => success(), failure);
});

 const makeStep = (config, label, expected) => {
   return Chain.asStep({}, [
     McEditor.cFromSettings(config),
     NamedChain.asChain([
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       NamedChain.direct('editor', cSetContent('<p>Hello world!</p>'), ''),
       NamedChain.direct('editor', cGetBodyDir, 'editorBodyDirectionality'),
       NamedChain.direct('editorBodyDirectionality', Assertions.cAssertEq(label, expected), 'assertion'),
       NamedChain.output('editor')
     ]),
     McEditor.cRemove
   ]);
 };

UnitTest.asynctest('Editor alignment toolbar buttons test', (success, failure) => {
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Testing toolbar: toolbar alignment buttons', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', McEditor.cFromSettings({
          toolbar: 'alignleft aligncenter alignright alignjustify alignnone',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        })),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', Assertions.cAssertStructure(
          'Checking toolbar should have just alignment buttons',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-toolbar') ],
              children: [
                s.element('div', {
                  classes: [ arr.has('tox-toolbar__group') ],
                  children: [
                    s.element('button', {
                      attrs: { title: str.is('Align left')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align center')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align right')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Justify')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('No alignment')}
                    }),
                  ]
                })
              ]
            });
          })
        ), Id.generate('')),
        NamedChain.direct('editor', McEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ])
  ], success, failure);
});