Skip to content

Editor embedding

Language and interface

Interface language, spell-check dictionaries, frame size, toolbars, and the status of white labelling.

On this page

Interface language#

editor.lang takes a language code such as vi (default) or en-US; the gate turns it into the lang parameter of the editor page. Codes the editor server has no translation for use a fallback language (usually English). Gate error messages (message) are always Vietnamese.

Spell-check dictionaries are a server-side setting: O3O_ONLINE_DICTIONARIES, default vi en_US.

Frame and toolbars#

FieldValuesNotes
ui.width, ui.heightCSS strings, default 100%The container must have a real height.
ui.modetabbed | compactTabbed toolbar (default) or compact.
ui.menubarbooleanOnly meaningful with compact. Applied after loading.
ui.statusbarbooleanApplied after loading.
ui.userListbooleanCo-editor list.
ui.closeButtonbooleanClose button, fires onClose.
ui.limitBannerbooleanBanner shown when downgraded by the cap; false if you draw your own.
JavaScriptCompact interface in English
new O3O.Editor("o3o-editor", {
  document: { url: "http://localhost:8080/o3o/demo/sample.docx", title: "sample.docx", fileType: "docx", key: "ui-demo-1" },
  editor: { mode: "edit", lang: "en-US", user: { id: "u-1001", name: "Jane Doe" } },   // English interface
  ui: {
    width: "100%",
    height: "calc(100vh - 48px)",   // leave room for your own navigation bar
    mode: "compact",                // compact toolbar instead of tabs
    menubar: true,                  // only meaningful with mode "compact"
    statusbar: false,
    userList: false,
    closeButton: true,
    limitBanner: true
  }
});

Branding#

The DEV Docker bundle uses the upstream editor image, so the interface carries the upstream name and logo and cannot be changed by configuration; that image is for internal testing only. The O3O Office Online name and white labelling need the source-built O3O image.

Coming soon

ui.theme (light, dark), ui.logo, ui.productName, ui.primaryColor for the enterprise edition; ui.watermark; per-button visibility; ui.ruler; ui.sidebar.