[{"data":1,"prerenderedAt":417},["ShallowReactive",2],{"quirekit-doc:\u002Fclassic\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":407,"extension":408,"keywords":409,"locale":410,"meta":411,"navigation":162,"order":88,"path":412,"section":413,"seo":414,"stem":415,"__hash__":416},"docs\u002Fclassic\u002Fquick-start.zh-CN.md","Classic 快速接入",{"type":7,"value":8,"toc":400},"minimark",[9,22,36,40,47,64,67,74,282,307,318,321,324,328,345,360,363,367,369,371,373,376,379,381,384,396],[10,11,12,13,17,18,21],"p",{},"Classic 是框架之上的分页产品壳层。",[14,15,16],"code",{},"@quirekit\u002Fclassic-editor"," 提供挂载、工作区与产品插件；可选 ",[14,19,20],{},"@quirekit\u002Fclassic-docx"," 装配 Word schema、界面与文件服务。它们不能与 Core 的普通 Extension 混为一谈。",[10,23,24,25,30,31,35],{},"希望自己实现类似 Classic 的产品界面，请先读",[26,27,29],"a",{"href":28},"\u002Fbuild","从 Core 构建产品","；本页讲接入现有 Classic 壳层。自定义功能区、面板和文件服务的完整实现见",[26,32,34],{"href":33},"\u002Fbuild\u002Fproduct-plugin","产品插件","。",[37,38,39],"h2",{"id":39},"获取与装配",[10,41,42,43,35],{},"Classic 壳层使用 AGPL-3.0-only，Word 预设与 Pro 是独立商业包。以下 Word 体验使用工作区包；外部项目需要先取得相应包和授权，不应假定它们都能从公共 npm 安装。当前能力见 ",[26,44,46],{"href":45},"\u002Fplugins\u002Fword","Word 插件",[10,48,49,50,54,55,59,60,35],{},"使用方式分别见",[26,51,53],{"href":52},"\u002Fclassic\u002Ffree","免费评估与社区授权","与",[26,56,58],{"href":57},"\u002Fclassic\u002Fcommercial","付费使用","；完成挂载后继续",[26,61,63],{"href":62},"\u002Fclassic\u002Fconfiguration","配置与生命周期",[37,65,66],{"id":66},"最小挂载",[10,68,69,70,73],{},"在 Vue 的 ",[14,71,72],{},"onMounted"," 中取得已有元素后，使用共享 Vue runtime 的入口创建产品：",[75,76,82],"pre",{"className":77,"code":78,"filename":79,"language":80,"meta":81,"style":81},"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('zh-CN'),\n  locale: 'zh-CN',\n  plugins: [createClassicWordDocxPlugin()],\n  webFonts: false,\n})\ninstance.ui.setZoomMode('fit-width')\n","创建 Word 产品实例","ts","",[14,83,84,104,112,118,124,130,141,149,157,164,184,190,208,226,237,249,259,265],{"__ignoreMap":81},[85,86,89,93,97,100],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"sDD9d","import",[85,94,96],{"class":95},"sVPnS"," { createClassicEditor } ",[85,98,99],{"class":91},"from",[85,101,103],{"class":102},"s-HEn"," '@quirekit\u002Fclassic-editor\u002Fvue'\n",[85,105,107,109],{"class":87,"line":106},2,[85,108,92],{"class":91},[85,110,111],{"class":95}," {\n",[85,113,115],{"class":87,"line":114},3,[85,116,117],{"class":95},"  createClassicWordPreset,\n",[85,119,121],{"class":87,"line":120},4,[85,122,123],{"class":95},"  createClassicWordDefaultDocument,\n",[85,125,127],{"class":87,"line":126},5,[85,128,129],{"class":95},"  createClassicWordDocxPlugin,\n",[85,131,133,136,138],{"class":87,"line":132},6,[85,134,135],{"class":95},"} ",[85,137,99],{"class":91},[85,139,140],{"class":102}," '@quirekit\u002Fclassic-docx\u002Fvue'\n",[85,142,144,146],{"class":87,"line":143},7,[85,145,92],{"class":91},[85,147,148],{"class":102}," '@quirekit\u002Fclassic-editor\u002Fstyles.css'\n",[85,150,152,154],{"class":87,"line":151},8,[85,153,92],{"class":91},[85,155,156],{"class":102}," '@quirekit\u002Fclassic-docx\u002Fstyles.css'\n",[85,158,160],{"class":87,"line":159},9,[85,161,163],{"emptyLinePlaceholder":162},true,"\n",[85,165,167,170,174,177,181],{"class":87,"line":166},10,[85,168,169],{"class":91},"const",[85,171,173],{"class":172},"sUNQB"," instance",[85,175,176],{"class":91}," =",[85,178,180],{"class":179},"sgQzM"," createClassicEditor",[85,182,183],{"class":95},"({\n",[85,185,187],{"class":87,"line":186},11,[85,188,189],{"class":95},"  element,\n",[85,191,193,196,199,202,205],{"class":87,"line":192},12,[85,194,195],{"class":95},"  preset: ",[85,197,198],{"class":179},"createClassicWordPreset",[85,200,201],{"class":95},"({ proofing: ",[85,203,204],{"class":172},"false",[85,206,207],{"class":95}," }),\n",[85,209,211,214,217,220,223],{"class":87,"line":210},13,[85,212,213],{"class":95},"  document: ",[85,215,216],{"class":179},"createClassicWordDefaultDocument",[85,218,219],{"class":95},"(",[85,221,222],{"class":102},"'zh-CN'",[85,224,225],{"class":95},"),\n",[85,227,229,232,234],{"class":87,"line":228},14,[85,230,231],{"class":95},"  locale: ",[85,233,222],{"class":102},[85,235,236],{"class":95},",\n",[85,238,240,243,246],{"class":87,"line":239},15,[85,241,242],{"class":95},"  plugins: [",[85,244,245],{"class":179},"createClassicWordDocxPlugin",[85,247,248],{"class":95},"()],\n",[85,250,252,255,257],{"class":87,"line":251},16,[85,253,254],{"class":95},"  webFonts: ",[85,256,204],{"class":172},[85,258,236],{"class":95},[85,260,262],{"class":87,"line":261},17,[85,263,264],{"class":95},"})\n",[85,266,268,271,274,276,279],{"class":87,"line":267},18,[85,269,270],{"class":95},"instance.ui.",[85,272,273],{"class":179},"setZoomMode",[85,275,219],{"class":95},[85,277,278],{"class":102},"'fit-width'",[85,280,281],{"class":95},")\n",[10,283,284,287,288,291,292,35,295,298,299,302,303,306],{},[14,285,286],{},"element"," 是宿主元素，例如 Vue 的 ",[14,289,290],{},"ref"," 在挂载后取得的值。给它一个实际高度，如 ",[14,293,294],{},"height: 640px",[14,296,297],{},"preset"," 安装 Word 模型与视图，",[14,300,301],{},"document"," 提供匹配的初始正文，",[14,304,305],{},"plugins"," 另行装配 DOCX 文件服务。这里关闭校对和外部字体库，避免把宿主服务准备混进入门步骤；需要时按对应插件配置开启。",[10,308,309,310,313,314,317],{},"在 ",[14,311,312],{},"onBeforeUnmount"," 中调用 ",[14,315,316],{},"instance.destroy()","。普通脚本应用可使用根入口创建产品；Nuxt 将挂载放在客户端，完整异步加载与退出处理见下方示例。",[37,319,320],{"id":320},"实际效果",[10,322,323],{},"这是公开 Word preset 的默认文档，可输入、格式化、切换只读并下载当前 JSON。文件菜单由正式 DOCX 插件提供。修改仅在本页面会话内保留。",[325,326],"docs-demo",{"name":327},"classic\u002Feditor",[10,329,330,331,334,335,338,339,342,343,35],{},"Vue 宿主使用 ",[14,332,333],{},"\u002Fvue"," 入口共享 Vue runtime。动态导入完成前检查宿主是否还存在；结束时 ",[14,336,337],{},"destroy()","。示例通过 ",[14,340,341],{},"update()"," 更新主题、语言与只读，保留同一个 Core、正文和撤销历史。更改文档模型或其他结构配置仍会重建，详见",[26,344,63],{"href":62},[10,346,347,348,351,352,355,356,35],{},"同时导入 ",[14,349,350],{},"@quirekit\u002Fclassic-editor\u002Fstyles.css"," 与所用 Word 包的 ",[14,353,354],{},"@quirekit\u002Fclassic-docx\u002Fstyles.css","，如源码所示。公开样式入口包含组件抽取样式，功能区、块控件、浮层和面板都依赖它；不要只复制正文画布的样式。自建 Core 工作区则使用 View 自己的公开基础样式，见",[26,357,359],{"href":358},"\u002Fbuild\u002Fview","View 接入",[37,361,362],{"id":362},"公共入口",[364,365],"docs-api",{"name":366},"createClassicEditor",[364,368],{"name":198},[364,370],{"name":216},[37,372,34],{"id":34},[10,374,375],{},"普通 Extension 拥有文档语义；Classic 产品插件组合功能区、菜单、侧栏和文档服务。",[364,377],{"name":378},"defineClassicEditorPlugin",[364,380],{"name":245},[10,382,383],{},"Pro 审阅面板、内容控件界面，及可选 AI、PDF\u002FOFD 适配器需要单独装配，本示例不声称已安装它们。",[10,385,386,387,391,392,395],{},"下一步接入",[26,388,390],{"href":389},"\u002Fclassic\u002Ffiles","保存、打开与文件转换","，再按",[26,393,394],{"href":62},"配置说明","调整产品界面。",[397,398,399],"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":81,"searchDepth":106,"depth":106,"links":401},[402,403,404,405,406],{"id":39,"depth":106,"text":39},{"id":66,"depth":106,"text":66},{"id":320,"depth":106,"text":320},{"id":362,"depth":106,"text":362},{"id":34,"depth":106,"text":34},"将 Core、分页视图和产品界面组合成完整编辑体验。","md",null,"zh-CN",{},"\u002Fclassic\u002Fquick-start","Classic 入门",{"title":5,"description":407},"classic\u002Fquick-start.zh-CN","Dkb-oqLUJuORC45bl0CGGdQhNs-lhZFfhIMitSeiLKo",1793045224186]