本文整理匯總了TypeScript中@ephox/alloy.GuiFactory.external方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript GuiFactory.external方法的具體用法？TypeScript GuiFactory.external怎麽用？TypeScript GuiFactory.external使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.GuiFactory的用法示例。
在下文中一共展示了GuiFactory.external方法的5個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: zoomFit
return memContainer.getOpt(anyInSystem).map((panel) => {
const aImg = GuiFactory.external({
element: img
});
Replacing.replaceAt(panel, 1, Option.some(aImg));
const lastViewRect = viewRectState.get();
const viewRect = {
x: 0,
y: 0,
w: img.dom().naturalWidth,
h: img.dom().naturalHeight
};
viewRectState.set(viewRect);
const rect = Rect.inflate(viewRect, -20, -20);
rectState.set(rect);
if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
zoomFit(panel, img);
}
repaintImg(panel, img);
return img;
});示例2: function
const onload = DomEvent.bind(iframe, 'load', function () {
const head = Element.fromDom(iframe.dom().contentWindow.document.head);
const body = Element.fromDom(iframe.dom().contentWindow.document.body);
Attachment.attachSystem(body, realm.system());
Css.set(body, 'margin', '0px');
const css = Element.fromTag('link');
Attr.setAll(css, {
href: '/project/tinymce/js/tinymce/skins/ui/oxide/skin.mobile.min.css',
rel: 'Stylesheet',
type: 'text/css'
});
Insert.append(head, css);
onload.unbind();
const editor = Element.fromTag('iframe');
Attr.set(editor, 'src', '/project/tinymce/src/themes/mobile/test/html/editor.html');
Replacing.append(
realm.system().getByDom(Element.fromDom(
realm.element().dom().querySelector('.tinymce-mobile-editor-socket'))
).getOrDie(),
GuiFactory.external({
element: editor
})
);
realm.init({
editor: {
getFrame () {
return editor;
},
onDomChanged () {
return { unbind: Fun.noop };
}
},
container: realm.element(),
socket: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-editor-socket')),
toolstrip: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolstrip')),
toolbar: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolbar')),
alloy: realm.system(),
dropup: realm.dropup()
});
});示例3: function
export default function () {
const frame = Element.fromTag('iframe');
Attr.set(frame, 'src', '/project/tinymce/src/themes/mobile/test/html/editor.html');
const sWaitForEditorLoaded = Waiter.sTryUntil(
'Waiting for iframe to load',
Step.sync(() => {
Assertions.assertEq('Check for a content editable body', 'true', frame.dom().contentWindow.document.body.contentEditable);
}),
100,
8000
);
const config = {
getFrame () {
return frame;
},
onDomChanged () {
return { unbind: Fun.noop };
}
};
const delegate = TestEditor();
const dEditor = delegate.editor();
const editor = {
selection: {
getStart () {
return WindowSelection.getExact(frame.dom().contentWindow).map(function (sel) {
return sel.start().dom();
}).getOr(null);
},
getContent () {
return frame.dom().contentWindow.document.body.innerHTML;
},
select: Fun.noop
},
getBody () {
return frame.dom().contentWindow.document.body;
},
insertContent: dEditor.insertContent,
execCommand: dEditor.execCommand,
dom: dEditor.dom,
// Maybe this should be implemented
focus () {
Focus.focus(frame);
const win = frame.dom().contentWindow;
WindowSelection.getExact(win).orThunk(function () {
const fbody = Element.fromDom(frame.dom().contentWindow.document.body);
const elem = Cursors.calculateOne(fbody, [ 0 ]);
WindowSelection.setExact(win, elem, 0, elem, 0);
return Option.none();
});
},
ui: {
registry: {
getAll: () => {
return {
icons: {}
};
}
}
}
};
const component = GuiFactory.build(
GuiFactory.external({
element: frame
})
);
return {
component: Fun.constant(component) as () => AlloyComponent,
config: Fun.constant(config),
editor: Fun.constant(editor),
adder: delegate.adder,
assertEq: delegate.assertEq,
sAssertEq: delegate.sAssertEq,
sWaitForEditorLoaded,
sClear: delegate.sClear,
sPrepareState: delegate.sPrepareState
};
}示例4: function
export default function () {
const frame = Element.fromTag('iframe');
Attr.set(frame, 'src', '/project/src/themes/mobile/test/html/editor.html');
const config = {
getFrame () {
return frame;
},
onDomChanged () {
return { unbind: Fun.noop };
}
};
const delegate = TestEditor();
const dEditor = delegate.editor();
const editor = {
selection: {
getStart () {
return WindowSelection.getExact(frame.dom().contentWindow).map(function (sel) {
return sel.start().dom();
}).getOr(null);
},
getContent () {
return frame.dom().contentWindow.document.body.innerHTML;
},
select: Fun.noop
},
getBody () {
return frame.dom().contentWindow.document.body;
},
insertContent: dEditor.insertContent,
execCommand: dEditor.execCommand,
dom: dEditor.dom,
// Maybe this should be implemented
focus () {
Focus.focus(frame);
const win = frame.dom().contentWindow;
WindowSelection.getExact(win).orThunk(function () {
const fbody = Element.fromDom(frame.dom().contentWindow.document.body);
const elem = Cursors.calculateOne(fbody, [ 0 ]);
WindowSelection.setExact(win, elem, 0, elem, 0);
});
}
};
const component = GuiFactory.build(
GuiFactory.external({
element: frame
})
);
return {
component: Fun.constant(component),
config: Fun.constant(config),
editor: Fun.constant(editor),
adder: delegate.adder,
assertEq: delegate.assertEq,
sAssertEq: delegate.sAssertEq,
sClear: delegate.sClear,
sPrepareState: delegate.sPrepareState
};
}示例5: tooltipWorker
tooltipWorker((elm) => {
Tooltipping.setComponents(component, [
GuiFactory.external({element: Element.fromDom(elm) })
]);
});