Configuration and lifetime
Separate initial content, product settings and host services, then update and dispose the editor correctly.
Run the complete quick start before adapting its configuration. Vue applications use the /vue entries to share the application's Vue runtime.
Creation-time choices
| Option | Purpose |
|---|---|
element | Editor host; omit it to call mount() later |
document | Initial canonical content, rather than interface translations |
preset | Document model, views and default product plugins |
plugins | Product ribbons, sidebars, actions and file services |
extensions | Additional Core extensions compatible with the model and View |
media, host | Durable media and host resource services, following their creation-time contracts |
Do not recreate the instance on every interface render or repeatedly pass document to update button state. See document models for model and Schema choices.
Interface and workspace
| Option | Usage | Defaults and boundaries |
|---|---|---|
locale | 'zh-CN' or 'en' | Chinese by default; changes the interface without translating existing content |
editable | false for read-only input | True by default; programmatic writes still need application permission checks |
theme | A complete QuireKit theme | Instance overrides preset; not just a primary color |
view | { backend: 'canvas' } or 'svg' | Canvas by default; product backend updates rebuild Core |
shell | Menu, ribbon, toolbar, ruler, sidebars and status visibility | Override individual preset fields |
ui | Contribution ID lists or false for toolbar, contextMenu and selectionPopup | Compose installed controls rather than creating document commands |
webFonts | Font-library settings or false | Omission enables default external font-library configuration; disabled hosts still prepare fonts used by content |
For example, retain the ribbon, hide the compact toolbar and collapse controls in narrow windows:
shell: { toolbar: false, ribbon: true, ribbonOverflow: 'collapse' },
ui: { selectionPopup: false },
webFonts: false,
shell controls regions; ui composes registered items. Install new actions or panels through a product plugin, then reference contribution IDs. Visibility does not grant or revoke write permissions.
Load both @quirekit/classic-editor/styles.css and the selected Word package's @quirekit/classic-docx/styles.css. The host supplies a real height and available width; public styles position product components, painted surfaces and overlays.
Adjust the current workspace through UI controls
instance.ui.setZoomMode('fit-width')
instance.ui.setRulerVisible(false)
instance.ui.setSidebarVisible('right', false)
These operations preserve content and history. Open an installed panel with openSidebarPanel(side, panelId). subscribe(listener) observes UI state and returns a cleanup function.
Which updates rebuild Core
Updates containing only locale, editable, and supported theme changes retain the same Core, selection, storage, listeners and history. Both built-in generic and Word presets support theme updates. Locale does not translate content; theme refreshes UI and derived paint. Editability updates cancel imports that have not committed.
Supplying document, preset, plugins, extensions, view, features, shell, ui or runtime structure still unmounts and rebuilds Core/View. Content is retained by default, but the old Core and history end; read instance.editor again. Mixed updates also follow this structural path. Update only when configuration changes, never per keystroke or Vue render.
A custom preset retains the session on theme changes only when it implements updatePresentation(context), refreshing owned nonpersistent presentation without changing Schema or content. Without the hook, theme changes still rebuild. See Classic API.
| Updated field | Merge rule |
|---|---|
document | Replace when explicitly supplied; otherwise retain current content |
plugins, extensions | Replace instance arrays; include retained entries again. Preset plugins remain separate |
features, shell, view, canvasRuntime, svgRuntime | Shallow merge individual fields into current settings |
ui | Update by surface; each items list is final, and false disables that surface |
preset, theme, locale, editable, webFonts | Use the supplied replacement value |
media, host, surfaceMode | Not update options; create a new product to replace these services |
Bind document subscriptions through plugin onMount / onUnmount, rather than observing only the first Core. The saving tutorial includes a reusable recipe. Product onUpdate also runs for selection and interface changes; it differs from Core's content update.
Exit and remount
After a dynamic import completes, check that its host still exists. unmount() releases the shell and Core while retaining content for mount(element); it loses that Core's history too. destroy() permanently releases product resources. Pending built-in import preparation becomes invalid on unmount, destruction or document changes. Task owners still cancel arbitrary custom network requests.
Saving and resources
A JSON download is an explicit snapshot rather than automatic saving. The application persists canonical content and media, handles failures and tracks unsaved changes; see Classic saving and opening. Full options, instance methods and UI controls are in the instance reference; actions, panels and services are in Classic API.