Classic quick start

Classic is a paginated product shell above the framework. @quirekit/classic-editor provides mounting, workspace and product plugins. Optional @quirekit/classic-docx assembles Word schemas, UI and file services. Product plugins are distinct from ordinary Core extensions.

To build your own Classic-like interface, start with the Core product tutorial. This page integrates the existing Classic shell. See product plugins for custom ribbon, panel and file-service implementation.

Distribution and assembly

The Classic shell uses AGPL-3.0-only; the Word preset and Pro are separate commercial packages. This example consumes workspace packages. External applications must obtain the relevant packages and license rather than assuming public npm availability. See Word plugins.

Choose a path through free evaluation and community licenses or commercial use, then continue with configuration and lifetime.

Minimal mounting

In Vue's onMounted, obtain the host element and create the product through entries sharing your Vue runtime:

import { createClassicEditor } from '@quirekit/classic-editor/vue'
import {
  createClassicWordPreset,
  createClassicWordDefaultDocument,
  createClassicWordDocxPlugin,
} from '@quirekit/classic-docx/vue'
import '@quirekit/classic-editor/styles.css'
import '@quirekit/classic-docx/styles.css'

const instance = createClassicEditor({
  element,
  preset: createClassicWordPreset({ proofing: false }),
  document: createClassicWordDefaultDocument('en'),
  locale: 'en',
  plugins: [createClassicWordDocxPlugin()],
  webFonts: false,
})
instance.ui.setZoomMode('fit-width')

element is the mounted host, such as the value of a Vue element ref. Give it a real height, for example height: 640px. preset installs the Word model and View; document supplies compatible initial content; plugins separately installs DOCX services. Proofing and external font acquisition are disabled here; enable them through their respective options when host services are ready.

Call instance.destroy() in onBeforeUnmount. Plain-script hosts can create through root entries. Nuxt mounts on the client; the complete example below handles asynchronous loading and disposal.

Live effect

This is the public Word preset's default document. Type, format, switch to read-only, and download current JSON. The official DOCX plugin supplies file-menu actions. Edits last only for this page session.

A Vue host uses the /vue entries to share its Vue runtime. After async loading, check that the host still exists; call destroy() on disposal. The example updates theme, language and editability while retaining the same Core, content and undo history. Document-model and other structural updates still rebuild; see configuration and lifetime.

Import @quirekit/classic-editor/styles.css and the selected Word package's @quirekit/classic-docx/styles.css, as the source does. Public style entries include extracted component styles needed by ribbons, block controls, overlays and panels; copying only canvas rules is insufficient. A custom Core workspace uses View's own public structural stylesheet; see View integration.

Public entry points

function createClassicEditor(options?: ClassicEditorOptions): ClassicEditorInstance

function createClassicWordPreset(options?: ClassicWordPresetOptions): ClassicEditorPreset

function createClassicWordDefaultDocument(locale?: ClassicEditorLocale): QuireJSONContent

Product plugins

Ordinary extensions own document semantics; Classic plugins compose ribbons, menus, sidebars and document services.

function defineClassicEditorPlugin<Plugin extends ClassicEditorPlugin>(plugin: Plugin): Plugin

function createClassicWordDocxPlugin(options?: ClassicWordDocxPluginOptions): ClassicEditorPlugin

Pro review panels, content-control UI and optional AI/PDF/OFD adapters require separate assembly and are not installed in this example.

Next, connect saving, opening and conversion, then adapt the interface through configuration.