[{"data":1,"prerenderedAt":416},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fclassic\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":406,"extension":407,"keywords":408,"locale":409,"meta":410,"navigation":165,"order":91,"path":411,"section":412,"seo":413,"stem":414,"__hash__":415},"docs\u002Fclassic\u002Fquick-start.en.md","Classic quick start",{"type":7,"value":8,"toc":399},"minimark",[9,22,36,41,49,66,70,77,285,307,318,322,325,329,342,357,361,365,367,369,373,376,379,381,384,395],[10,11,12,13,17,18,21],"p",{},"Classic is a paginated product shell above the framework. ",[14,15,16],"code",{},"@quirekit\u002Fclassic-editor"," provides mounting, workspace and product plugins. Optional ",[14,19,20],{},"@quirekit\u002Fclassic-docx"," assembles Word schemas, UI and file services. Product plugins are distinct from ordinary Core extensions.",[10,23,24,25,30,31,35],{},"To build your own Classic-like interface, start with ",[26,27,29],"a",{"href":28},"\u002Fen\u002Fbuild","the Core product tutorial",". This page integrates the existing Classic shell. See ",[26,32,34],{"href":33},"\u002Fen\u002Fbuild\u002Fproduct-plugin","product plugins"," for custom ribbon, panel and file-service implementation.",[37,38,40],"h2",{"id":39},"distribution-and-assembly","Distribution and assembly",[10,42,43,44,48],{},"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 ",[26,45,47],{"href":46},"\u002Fen\u002Fplugins\u002Fword","Word plugins",".",[10,50,51,52,56,57,61,62,48],{},"Choose a path through ",[26,53,55],{"href":54},"\u002Fen\u002Fclassic\u002Ffree","free evaluation and community licenses"," or ",[26,58,60],{"href":59},"\u002Fen\u002Fclassic\u002Fcommercial","commercial use",", then continue with ",[26,63,65],{"href":64},"\u002Fen\u002Fclassic\u002Fconfiguration","configuration and lifetime",[37,67,69],{"id":68},"minimal-mounting","Minimal mounting",[10,71,72,73,76],{},"In Vue's ",[14,74,75],{},"onMounted",", obtain the host element and create the product through entries sharing your Vue runtime:",[78,79,85],"pre",{"className":80,"code":81,"filename":82,"language":83,"meta":84,"style":84},"language-ts shiki shiki-themes github-light github-light github-dark","import { createClassicEditor } from '@quirekit\u002Fclassic-editor\u002Fvue'\nimport {\n  createClassicWordPreset,\n  createClassicWordDefaultDocument,\n  createClassicWordDocxPlugin,\n} from '@quirekit\u002Fclassic-docx\u002Fvue'\nimport '@quirekit\u002Fclassic-editor\u002Fstyles.css'\nimport '@quirekit\u002Fclassic-docx\u002Fstyles.css'\n\nconst instance = createClassicEditor({\n  element,\n  preset: createClassicWordPreset({ proofing: false }),\n  document: createClassicWordDefaultDocument('en'),\n  locale: 'en',\n  plugins: [createClassicWordDocxPlugin()],\n  webFonts: false,\n})\ninstance.ui.setZoomMode('fit-width')\n","Create a Word product instance","ts","",[14,86,87,107,115,121,127,133,144,152,160,167,187,193,211,229,240,252,262,268],{"__ignoreMap":84},[88,89,92,96,100,103],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sDD9d","import",[88,97,99],{"class":98},"sVPnS"," { createClassicEditor } ",[88,101,102],{"class":94},"from",[88,104,106],{"class":105},"s-HEn"," '@quirekit\u002Fclassic-editor\u002Fvue'\n",[88,108,110,112],{"class":90,"line":109},2,[88,111,95],{"class":94},[88,113,114],{"class":98}," {\n",[88,116,118],{"class":90,"line":117},3,[88,119,120],{"class":98},"  createClassicWordPreset,\n",[88,122,124],{"class":90,"line":123},4,[88,125,126],{"class":98},"  createClassicWordDefaultDocument,\n",[88,128,130],{"class":90,"line":129},5,[88,131,132],{"class":98},"  createClassicWordDocxPlugin,\n",[88,134,136,139,141],{"class":90,"line":135},6,[88,137,138],{"class":98},"} ",[88,140,102],{"class":94},[88,142,143],{"class":105}," '@quirekit\u002Fclassic-docx\u002Fvue'\n",[88,145,147,149],{"class":90,"line":146},7,[88,148,95],{"class":94},[88,150,151],{"class":105}," '@quirekit\u002Fclassic-editor\u002Fstyles.css'\n",[88,153,155,157],{"class":90,"line":154},8,[88,156,95],{"class":94},[88,158,159],{"class":105}," '@quirekit\u002Fclassic-docx\u002Fstyles.css'\n",[88,161,163],{"class":90,"line":162},9,[88,164,166],{"emptyLinePlaceholder":165},true,"\n",[88,168,170,173,177,180,184],{"class":90,"line":169},10,[88,171,172],{"class":94},"const",[88,174,176],{"class":175},"sUNQB"," instance",[88,178,179],{"class":94}," =",[88,181,183],{"class":182},"sgQzM"," createClassicEditor",[88,185,186],{"class":98},"({\n",[88,188,190],{"class":90,"line":189},11,[88,191,192],{"class":98},"  element,\n",[88,194,196,199,202,205,208],{"class":90,"line":195},12,[88,197,198],{"class":98},"  preset: ",[88,200,201],{"class":182},"createClassicWordPreset",[88,203,204],{"class":98},"({ proofing: ",[88,206,207],{"class":175},"false",[88,209,210],{"class":98}," }),\n",[88,212,214,217,220,223,226],{"class":90,"line":213},13,[88,215,216],{"class":98},"  document: ",[88,218,219],{"class":182},"createClassicWordDefaultDocument",[88,221,222],{"class":98},"(",[88,224,225],{"class":105},"'en'",[88,227,228],{"class":98},"),\n",[88,230,232,235,237],{"class":90,"line":231},14,[88,233,234],{"class":98},"  locale: ",[88,236,225],{"class":105},[88,238,239],{"class":98},",\n",[88,241,243,246,249],{"class":90,"line":242},15,[88,244,245],{"class":98},"  plugins: [",[88,247,248],{"class":182},"createClassicWordDocxPlugin",[88,250,251],{"class":98},"()],\n",[88,253,255,258,260],{"class":90,"line":254},16,[88,256,257],{"class":98},"  webFonts: ",[88,259,207],{"class":175},[88,261,239],{"class":98},[88,263,265],{"class":90,"line":264},17,[88,266,267],{"class":98},"})\n",[88,269,271,274,277,279,282],{"class":90,"line":270},18,[88,272,273],{"class":98},"instance.ui.",[88,275,276],{"class":182},"setZoomMode",[88,278,222],{"class":98},[88,280,281],{"class":105},"'fit-width'",[88,283,284],{"class":98},")\n",[10,286,287,290,291,294,295,298,299,302,303,306],{},[14,288,289],{},"element"," is the mounted host, such as the value of a Vue element ref. Give it a real height, for example ",[14,292,293],{},"height: 640px",". ",[14,296,297],{},"preset"," installs the Word model and View; ",[14,300,301],{},"document"," supplies compatible initial content; ",[14,304,305],{},"plugins"," separately installs DOCX services. Proofing and external font acquisition are disabled here; enable them through their respective options when host services are ready.",[10,308,309,310,313,314,317],{},"Call ",[14,311,312],{},"instance.destroy()"," in ",[14,315,316],{},"onBeforeUnmount",". Plain-script hosts can create through root entries. Nuxt mounts on the client; the complete example below handles asynchronous loading and disposal.",[37,319,321],{"id":320},"live-effect","Live effect",[10,323,324],{},"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.",[326,327],"docs-demo",{"name":328},"classic\u002Feditor",[10,330,331,332,335,336,339,340,48],{},"A Vue host uses the ",[14,333,334],{},"\u002Fvue"," entries to share its Vue runtime. After async loading, check that the host still exists; call ",[14,337,338],{},"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 ",[26,341,65],{"href":64},[10,343,344,345,348,349,352,353,48],{},"Import ",[14,346,347],{},"@quirekit\u002Fclassic-editor\u002Fstyles.css"," and the selected Word package's ",[14,350,351],{},"@quirekit\u002Fclassic-docx\u002Fstyles.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 ",[26,354,356],{"href":355},"\u002Fen\u002Fbuild\u002Fview","View integration",[37,358,360],{"id":359},"public-entry-points","Public entry points",[362,363],"docs-api",{"name":364},"createClassicEditor",[362,366],{"name":201},[362,368],{"name":219},[37,370,372],{"id":371},"product-plugins","Product plugins",[10,374,375],{},"Ordinary extensions own document semantics; Classic plugins compose ribbons, menus, sidebars and document services.",[362,377],{"name":378},"defineClassicEditorPlugin",[362,380],{"name":248},[10,382,383],{},"Pro review panels, content-control UI and optional AI\u002FPDF\u002FOFD adapters require separate assembly and are not installed in this example.",[10,385,386,387,391,392,48],{},"Next, connect ",[26,388,390],{"href":389},"\u002Fen\u002Fclassic\u002Ffiles","saving, opening and conversion",", then adapt the interface through ",[26,393,394],{"href":64},"configuration",[396,397,398],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":84,"searchDepth":109,"depth":109,"links":400},[401,402,403,404,405],{"id":39,"depth":109,"text":40},{"id":68,"depth":109,"text":69},{"id":320,"depth":109,"text":321},{"id":359,"depth":109,"text":360},{"id":371,"depth":109,"text":372},"Compose Core, paginated views and product UI into a complete editing experience.","md",null,"en",{},"\u002Fen\u002Fclassic\u002Fquick-start","Classic basics",{"title":5,"description":406},"classic\u002Fquick-start.en","nkK3BBbKeaXof1X7NAz84OklN3ot-ec1P2xiPA4TUcI",1793045225147]