TypeScript ThemeManager.add函数代码示例

ThemeManager.add('mobile', function (editor) {
  const renderUI = function (args) {
    const cssUrls = CssUrls.derive(editor);

    if (Settings.isSkinDisabled(editor) === false) {
      editor.contentCSS.push(cssUrls.content);
      DOMUtils.DOM.styleSheetLoader.load(cssUrls.ui, SkinLoaded.fireSkinLoaded(editor));
    } else {
      SkinLoaded.fireSkinLoaded(editor)();
    }

    const doScrollIntoView = function () {
      editor.fire('scrollIntoView');
    };

    const wrapper = Element.fromTag('div');
    const realm = PlatformDetection.detect().os.isAndroid() ? AndroidRealm(doScrollIntoView) : IosRealm(doScrollIntoView);
    const original = Element.fromDom(args.targetNode);
    Insert.after(original, wrapper);
    Attachment.attachSystem(wrapper, realm.system());

    const findFocusIn = function (elem) {
      return Focus.search(elem).bind(function (focused) {
        return realm.system().getByDom(focused).toOption();
      });
    };
    const outerWindow = args.targetNode.ownerDocument.defaultView;
    const orientation = Orientation.onChange(outerWindow, {
      onChange () {
        const alloy = realm.system();
        alloy.broadcastOn([ TinyChannels.orientationChanged() ], { width: Orientation.getActualWidth(outerWindow) });
      },
      onReady: Fun.noop
    });

    const setReadOnly = function (readOnlyGroups, mainGroups, ro) {
      if (ro === false) {
        editor.selection.collapse();
      }
      realm.setToolbarGroups(ro ? readOnlyGroups.get() : mainGroups.get());
      editor.setMode(ro === true ? 'readonly' : 'design');
      editor.fire(ro === true ? READING() : EDITING());
      realm.updateMode(ro);
    };

    const bindHandler = function (label, handler) {
      editor.on(label, handler);
      return {
        unbind () {
          editor.off(label);
        }
      };
    };

    editor.on('init', function () {
      realm.init({
        editor: {
          getFrame () {
            return Element.fromDom(editor.contentAreaContainer.querySelector('iframe'));
          },

          onDomChanged () {
            return {
              unbind: Fun.noop
            };
          },

          onToReading (handler) {
            return bindHandler(READING(), handler);
          },

          onToEditing (handler) {
            return bindHandler(EDITING(), handler);
          },

          onScrollToCursor (handler) {
            editor.on('scrollIntoView', function (tinyEvent) {
              handler(tinyEvent);
            });

            const unbind = function () {
              editor.off('scrollIntoView');
              orientation.destroy();
            };

            return {
              unbind
            };
          },

          onTouchToolstrip () {
            hideDropup();
          },

          onTouchContent () {
            const toolbar = Element.fromDom(editor.editorContainer.querySelector('.' + Styles.resolve('toolbar')));
            // If something in the toolbar had focus, fire an execute on it (execute on tap away)
            // Perhaps it will be clearer later what is a better way of doing this.
            findFocusIn(toolbar).each(AlloyTriggers.emitExecute);
            realm.restoreToolbar();
//.........这里部分代码省略.........

const setup = function (info, onSuccess, onFailure) {

  /* This test is going to create a toolbar with both list items on it */
  const alloy = Gui.create();

  Attachment.attachSystem(info.container, alloy);

  const toolbar = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: [ 'test-toolbar' ]
    },
    behaviours: Behaviour.derive([
      Replacing.config({ })
    ])
  });

  const socket = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: [ 'test-socket' ]
    }
  });

  alloy.add(toolbar);
  alloy.add(socket);

  const realm = {
    system: Fun.constant(alloy),
    socket: Fun.constant(socket)
  };

  ThemeManager.add(name, function (editor) {
    return {
      renderUI (args) {
        editor.fire('SkinLoaded');
        return {
          iframeContainer: socket.element().dom(),
          editorContainer: alloy.element().dom()
        };
      }
    };
  });

  return {
    use (f) {
      TinyLoader.setup(function (editor, onS, onF) {
        const features = Features.setup(realm, editor);

        FormatChangers.init(realm, editor);

        const apis = TinyApis(editor);

        const buttons = { };
        Arr.each(info.items, function (item) {
          // For each item in the toolbar, make a lookup
          buttons[item] = Memento.record(features[item].sketch());
        });

        const toolbarItems = Arr.map(info.items, function (item) {
          return buttons[item].asSpec();
        });

        Replacing.set(toolbar, toolbarItems);
        f(realm, apis, toolbar, socket, buttons, onS, onF);
      }, {
        theme: name
      }, onSuccess, onFailure);
    }
  };
};

/**
 * Theme.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

import ThemeManager from 'tinymce/core/ThemeManager';
import ThemeApi from './api/ThemeApi';
import Api from 'tinymce/ui/Api';
import FormatControls from 'tinymce/ui/FormatControls';

declare let window: any;

Api.registerToFactory();
Api.appendTo(window.tinymce ? window.tinymce : {});

ThemeManager.add('modern', function (editor) {
  FormatControls.setup(editor);
  return ThemeApi.get(editor);
});

export default function () { }

 * Theme.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

import ThemeManager from 'tinymce/core/ThemeManager';
import ThemeApi from './api/ThemeApi';
import Buttons from './ui/Buttons';
import Panel from './ui/Panel';
import Api from 'tinymce/ui/Api';
import FormatControls from 'tinymce/ui/FormatControls';

declare let window: any;

Api.registerToFactory();
Api.appendTo(window.tinymce ? window.tinymce : {});

ThemeManager.add('inlite', function (editor) {
  const panel = Panel();

  FormatControls.setup(editor);
  Buttons.addToEditor(editor, panel);

  return ThemeApi.get(editor, panel);
});

export default function () { }