TypeScript Theme.default函數代碼示例

export default function () {
  AdvListPlugin();
  AnchorPlugin();
  AutoLinkPlugin();
  AutoResizePlugin();
  AutoSavePlugin();
  BbCodePlugin();
  CharMapPlugin();
  CodePlugin();
  CodeSamplePlugin();
  ColorPickerPlugin();
  ContextMenuPlugin();
  DirectionalityPlugin();
  EmoticonsPlugin();
  FullPagePlugin();
  FullScreenPlugin();
  HrPlugin();
  ImagePlugin();
  ImageToolsPlugin();
  ImportCssPlugin();
  InsertDatetimePlugin();
  LegacyOutputPlugin();
  LinkPlugin();
  ListsPlugin();
  MediaPlugin();
  NonBreakingPlugin();
  NonEditablePlugin();
  PageBreakPlugin();
  PastePlugin();
  PreviewPlugin();
  PrintPlugin();
  SavePlugin();
  SearchReplacePlugin();
  SpellCheckerPlugin();
  TabFocusPlugin();
  TablePlugin();
  TemplatePlugin();
  TextColorPlugin();
  TextPatternPlugin();
  TocPlugin();
  VisualBlocksPlugin();
  VisualCharsPlugin();
  WordCountPlugin();
  ModernTheme();
  MobileTheme();
  HelpPlugin();

  PluginManager.urls.emoticons = '../../../../js/tinymce/plugins/emoticons';

  const settings = {
    skin_url: '../../../../js/tinymce/skins/lightgray',
    codesample_content_css: '../../../../js/tinymce/plugins/codesample/css/prism.css',
    visualblocks_content_css: '../../../../js/tinymce/plugins/visualblocks/css/visualblocks.css',
    images_upload_url: 'd',
    selector: 'textarea',
    // rtl_ui: true,
    link_list: [
      { title: 'My page 1', value: 'http://www.tinymce.com' },
      { title: 'My page 2', value: 'http://www.moxiecode.com' }
    ],
    image_list: [
      { title: 'My page 1', value: 'http://www.tinymce.com' },
      { title: 'My page 2', value: 'http://www.moxiecode.com' }
    ],
    image_class_list: [
      { title: 'None', value: '' },
      { title: 'Some class', value: 'class-name' }
    ],
    importcss_append: true,
    height: 400,
    file_picker_callback (callback, value, meta) {
      // Provide file and text for the link dialog
      if (meta.filetype === 'file') {
        callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
      }

      // Provide image and alt text for the image dialog
      if (meta.filetype === 'image') {
        callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
      }

      // Provide alternative source and posted for the media dialog
      if (meta.filetype === 'media') {
        callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
      }
    },
    spellchecker_callback (method, text, success, failure) {
      const words = text.match(this.getWordCharPattern());

      if (method === 'spellcheck') {
        const suggestions = {};

        for (let i = 0; i < words.length; i++) {
          suggestions[words[i]] = ['First', 'Second'];
        }

        success(suggestions);
      }

      if (method === 'addToDictionary') {
//.........這裏部分代碼省略.........

export default function () {
  Theme();
  ListsPlugin();
  AutolinkPlugin();
  AutosavePlugin();

  EditorManager.init({
    selector: '.tiny-text',
    theme: 'mobile',
    toolbar: [ 'styleselect', 'undo', 'redo', 'bold', 'bold', 'italic', 'underline', 'styleselect', 'removeformat', 'link', 'unlink', 'image', 'fontsizeselect', 'bullist', 'numlist', 'forecolor' ],
    plugins: [
      'lists', // Required for list functionality (commands),
      'autolink', // Required for turning pasted text into hyperlinks
      'autosave' // Required to prevent users losing content when they press back
    ],
    skin_url: '../../../../../js/tinymce/skins/lightgray',

    setup (ed) {
      ed.on('skinLoaded', function () {
        // Notification fields for equality: type, text, progressBar, timeout
        ed.notificationManager.open({
          text: 'You will not see this because the mobile theme has no notifications',
          type: 'info'
        });
      });
    },

    style_formats: [
      {
        title: 'Headings', items: [
          { title: 'Heading 1', format: 'h1' },
          { title: 'Heading 2', format: 'h2' },
          { title: 'Heading 3', format: 'h3' },
          { title: 'Heading 4', format: 'h4' },
          { title: 'Heading 5', format: 'h5' },
          { title: 'Heading 6', format: 'h6' }
        ]
      },

      {
        title: 'Inline', items: [
          { title: 'Bold', icon: 'bold', format: 'bold' },
          { title: 'Italic', icon: 'italic', format: 'italic' },
          { title: 'Underline', icon: 'underline', format: 'underline' },
          { title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough' },
          { title: 'Superscript', icon: 'superscript', format: 'superscript' },
          { title: 'Subscript', icon: 'subscript', format: 'subscript' },
          { title: 'Code', icon: 'code', format: 'code' }
        ]
      },

      {
        // Should not appear when not in a table.
        title: 'Table', items: [
          { title: 'Rows', items: [
            { title: 'Cell', selector: 'tr', styles: { background: 'red' } }
          ] }
        ]
      },

      {
        title: 'Blocks', items: [
          { title: 'Paragraph', format: 'p', selector: 'address' },
          { title: 'Blockquote', format: 'blockquote', selector: 'address' },
          { title: 'Div', format: 'div', selector: 'address' },
          { title: 'Pre', format: 'pre', selector: 'address' }
        ]
      },

      {
        title: 'Alignment', items: [
          { title: 'Left', icon: 'alignleft', format: 'alignleft' },
          { title: 'Center', icon: 'aligncenter', format: 'aligncenter' },
          { title: 'Right', icon: 'alignright', format: 'alignright' },
          { title: 'Justify', icon: 'alignjustify', format: 'alignjustify' }
        ]
      }
    ]
  });
}

UnitTest.asynctest('browser.tinymce.themes.mobile.ThemeTest', (success, failure) => {

  mobileTheme();
  ImagePlugin();
  TablePlugin();
  LinkPlugin();
  PastePlugin();
  ContextMenuPlugin();
  TextPatternPlugin();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const ui = TinyUi(editor);

    Pipeline.async({}, [
      UiFinder.sExists(Element.fromDom(document.body), `.${Styles.resolve('mask-tap-icon')}`),
      ui.sClickOnUi('Click the tap to edit button', `.${Styles.resolve('mask-tap-icon')}`),
      ui.sWaitForUi('Wait mobile Toolbar', `.${Styles.resolve('toolbar')}`),
      ui.sWaitForUi('Check for The first group', '[aria-label="The first group"]'),
      ui.sWaitForUi('Check for the action group', '[aria-label="the action group"]'),
      UiFinder.sNotExists(Element.fromDom(document.body), '[aria-label="The read only mode group"]'),
      UiFinder.sNotExists(Element.fromDom(document.body), `.${Styles.resolve('mask-edit-icon')}`),
      ui.sClickOnUi('Click back to Tap to Edit screen', `.${Styles.resolve('icon-back')}`),
      UiFinder.sExists(Element.fromDom(document.body), `.${Styles.resolve('mask-tap-icon')}`),
    ], onSuccess, onFailure);
  }, {
    theme: 'mobile',
    plugins: 'image table link paste textpattern',
    insert_toolbar: 'quickimage media quicktable',
    selection_toolbar: 'bold italic | quicklink h1 h2 blockquote',
    inline: false,
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.themes.mobile.SkinFalseTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Theme();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {

    // This is a weird test that only checks that the skinloaded event is fired even if skin is set to false
    Pipeline.async({}, [
    ], onSuccess, onFailure);
  }, {
    skin: false,
    theme: 'mobile',
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.themes.mobile.EditorRemoveTest', (success, failure) => {
  const platform = PlatformDetection.detect();

  if (platform.browser.isIE() || platform.browser.isEdge()) {
    // No need to run mobile tests on IE/Edge as it's not supported
    return success();
  }

  mobileTheme();

  const cleanedThorAttrsStruct = (str) => {
    return {
      'position': str.none(),
      'background-color': str.none(),
    };
  };

  Pipeline.async({}, [
    Chain.asStep({}, [
      McEditor.cFromSettings({
        theme: 'mobile',
        inline: false,
        base_url: '/project/tinymce/js/tinymce'
      }),
      Chain.op((editor) => {
        const wrapperElm = Element.fromHtml('<div class="tinymce-editor"></div>');
        Selectors.one('#' + editor.id).each((textareaElm) => {
          Insert.wrap(textareaElm, wrapperElm);
        });
        Selectors.one('.tinymce-mobile-outer-container').each((editorElm) => {
          Insert.wrap(editorElm, wrapperElm);
        });
      }),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.writeValue('body', Body.body()),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click the tap to edit button', `.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Wait mobile Toolbar', `.${Styles.resolve('toolbar')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for The first group', '[aria-label="The first group"]'), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for the action group', '[aria-label="the action group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists('[aria-label="The read only mode group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists(`.${Styles.resolve('mask-edit-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click back to Tap to Edit screen', `.${Styles.resolve('icon-back')}`), '_'),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.outputInput
      ]),
      McEditor.cRemove,
      Chain.mapper(() => Body.body()),
      Assertions.cAssertStructure('Assert Thor overrides removed from body', ApproxStructure.build((s, str) => {
        return s.element('body', {
          attrs: cleanedThorAttrsStruct(str),
        });
      })),
      UiFinder.cFindIn('div.tinymce-editor'),
      Assertions.cAssertStructure('Assert Thor overrides removed from editor div', ApproxStructure.build((s, str) => {
        return s.element('div', {
          attrs: cleanedThorAttrsStruct(str),
          children: []
        });
      })),
      Chain.op((editorElm) => {
        Remove.remove(editorElm);
      })
    ])
  ], success, failure);
});