本文整理汇总了TypeScript中tinymce/ui/UiContainer.setUiContainer函数的典型用法代码示例。如果您正苦于以下问题:TypeScript setUiContainer函数的具体用法?TypeScript setUiContainer怎么用?TypeScript setUiContainer使用的例子?那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了setUiContainer函数的3个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: function
const showContextToolbar = function (match) {
let panel;
if (match.toolbar.panel) {
match.toolbar.panel.show();
reposition(match);
return;
}
panel = Factory.create({
type: 'floatpanel',
role: 'dialog',
classes: 'tinymce tinymce-inline arrow',
ariaLabel: 'Inline toolbar',
layout: 'flex',
direction: 'column',
align: 'stretch',
autohide: false,
autofix: true,
fixed: true,
border: 1,
items: Toolbar.createToolbar(editor, match.toolbar.items),
oncancel () {
editor.focus();
}
});
UiContainer.setUiContainer(editor, panel);
bindScrollEvent(panel);
match.toolbar.panel = panel;
panel.renderTo().reflow();
reposition(match);
};
示例2: function
const render = function () {
if (panel) {
if (!panel.visible()) {
show();
}
return;
}
// Render a plain panel inside the inlineToolbarContainer if it's defined
panel = theme.panel = Factory.create({
type: inlineToolbarContainer ? 'panel' : 'floatpanel',
role: 'application',
classes: 'tinymce tinymce-inline',
layout: 'flex',
direction: 'column',
align: 'stretch',
autohide: false,
autofix: isFixed(inlineToolbarContainer, editor),
fixed: isFixed(inlineToolbarContainer, editor),
border: 1,
items: [
Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
]
});
UiContainer.setUiContainer(editor, panel);
// Add statusbar
/*if (settings.statusbar !== false) {
panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
{type: 'elementpath'}
]});
}*/
Events.fireBeforeRenderUI(editor);
if (inlineToolbarContainer) {
panel.renderTo(inlineToolbarContainer).reflow();
} else {
panel.renderTo().reflow();
}
A11y.addKeys(editor, panel);
show();
ContextToolbars.addContextualToolbars(editor);
editor.on('nodeChange', reposition);
editor.on('ResizeWindow', reposition);
editor.on('activate', show);
editor.on('deactivate', hide);
editor.nodeChanged();
};
示例3: function
const render = function (editor, theme, args) {
let panel, resizeHandleCtrl, startSize;
if (Settings.isSkinDisabled(editor) === false && args.skinUiCss) {
DOM.styleSheetLoader.load(args.skinUiCss, SkinLoaded.fireSkinLoaded(editor));
} else {
SkinLoaded.fireSkinLoaded(editor)();
}
panel = theme.panel = Factory.create({
type: 'panel',
role: 'application',
classes: 'tinymce',
style: 'visibility: hidden',
layout: 'stack',
border: 1,
items: [
{
type: 'container',
classes: 'top-part',
items: [
Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
]
},
Sidebar.hasSidebar(editor) ? editAreaContainer(editor) : editArea('1 0 0 0')
]
});
UiContainer.setUiContainer(editor, panel);
if (Settings.getResize(editor) !== 'none') {
resizeHandleCtrl = {
type: 'resizehandle',
direction: Settings.getResize(editor),
onResizeStart () {
const elm = editor.getContentAreaContainer().firstChild;
startSize = {
width: elm.clientWidth,
height: elm.clientHeight
};
},
onResize (e) {
if (Settings.getResize(editor) === 'both') {
Resize.resizeTo(editor, startSize.width + e.deltaX, startSize.height + e.deltaY);
} else {
Resize.resizeTo(editor, null, startSize.height + e.deltaY);
}
}
};
}
if (Settings.hasStatusbar(editor)) {
const linkHtml = '<a href="https://www.tiny.cloud/?utm_campaign=editor_referral&utm_medium=poweredby&utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">Tiny</a>';
const html = I18n.translate(['Powered by {0}', linkHtml]);
const brandingLabel = Settings.isBrandingEnabled(editor) ? { type: 'label', classes: 'branding', html: ' ' + html } : null;
panel.add({
type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
{ type: 'elementpath', editor },
resizeHandleCtrl,
brandingLabel
]
});
}
Events.fireBeforeRenderUI(editor);
editor.on('SwitchMode', switchMode(panel));
panel.renderBefore(args.targetNode).reflow();
if (Settings.isReadOnly(editor)) {
editor.setMode('readonly');
}
if (args.width) {
DOM.setStyle(panel.getEl(), 'width', args.width);
}
// Remove the panel when the editor is removed
editor.on('remove', function () {
panel.remove();
panel = null;
});
// Add accesibility shortcuts
A11y.addKeys(editor, panel);
ContextToolbars.addContextualToolbars(editor);
return {
iframeContainer: panel.find('#iframe')[0].getEl(),
editorContainer: panel.getEl()
};
};