Classic 是框架之上的分页产品壳层。@quirekit/classic-editor 提供挂载、工作区与产品插件;可选 @quirekit/classic-docx 装配 Word schema、界面与文件服务。它们不能与 Core 的普通 Extension 混为一谈。
希望自己实现类似 Classic 的产品界面,请先读从 Core 构建产品;本页讲接入现有 Classic 壳层。自定义功能区、面板和文件服务的完整实现见产品插件。
获取与装配
Classic 壳层使用 AGPL-3.0-only,Word 预设与 Pro 是独立商业包。以下 Word 体验使用工作区包;外部项目需要先取得相应包和授权,不应假定它们都能从公共 npm 安装。当前能力见 Word 插件。
使用方式分别见免费评估与社区授权与付费使用;完成挂载后继续配置与生命周期。
最小挂载
在 Vue 的 onMounted 中取得已有元素后,使用共享 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('zh-CN'),
locale: 'zh-CN',
plugins: [createClassicWordDocxPlugin()],
webFonts: false,
})
instance.ui.setZoomMode('fit-width')
element 是宿主元素,例如 Vue 的 ref 在挂载后取得的值。给它一个实际高度,如 height: 640px。preset 安装 Word 模型与视图,document 提供匹配的初始正文,plugins 另行装配 DOCX 文件服务。这里关闭校对和外部字体库,避免把宿主服务准备混进入门步骤;需要时按对应插件配置开启。
在 onBeforeUnmount 中调用 instance.destroy()。普通脚本应用可使用根入口创建产品;Nuxt 将挂载放在客户端,完整异步加载与退出处理见下方示例。
实际效果
这是公开 Word preset 的默认文档,可输入、格式化、切换只读并下载当前 JSON。文件菜单由正式 DOCX 插件提供。修改仅在本页面会话内保留。
Vue 宿主使用 /vue 入口共享 Vue runtime。动态导入完成前检查宿主是否还存在;结束时 destroy()。示例通过 update() 更新主题、语言与只读,保留同一个 Core、正文和撤销历史。更改文档模型或其他结构配置仍会重建,详见配置与生命周期。
同时导入 @quirekit/classic-editor/styles.css 与所用 Word 包的 @quirekit/classic-docx/styles.css,如源码所示。公开样式入口包含组件抽取样式,功能区、块控件、浮层和面板都依赖它;不要只复制正文画布的样式。自建 Core 工作区则使用 View 自己的公开基础样式,见View 接入。
公共入口
@quirekit/classic-editorAGPL-3.0-only创建框架无关的 Classic 产品实例。options 提供文档、预设、能力、插件与挂载设置,返回支持挂载、更新、卸载和最终销毁的实例。
function createClassicEditor(options?: ClassicEditorOptions): ClassicEditorInstance@quirekit/classic-docx商业许可为宿主配置创建可选的完整 Word 产品预设。options 提供宿主设置,返回冻结预设;每次挂载解析独立扩展集合。
function createClassicWordPreset(options?: ClassicWordPresetOptions): ClassicEditorPreset@quirekit/classic-docx商业许可创建 Word 产品的规范初始文档。locale 仅决定初始文案,返回包含一节和命名页眉页脚 story 的 Quire JSON。
function createClassicWordDefaultDocument(locale?: ClassicEditorLocale): QuireJSONContent产品插件
普通 Extension 拥有文档语义;Classic 产品插件组合功能区、菜单、侧栏和文档服务。
@quirekit/classic-editorAGPL-3.0-only定义 Classic 产品插件,并保留 contribution 的字面量类型。plugin 为声明,返回可组合到预设或实例选项中的同一声明。
function defineClassicEditorPlugin<Plugin extends ClassicEditorPlugin>(plugin: Plugin): Plugin@quirekit/classic-docx商业许可创建正式 DOCX 导入导出插件。options 可指定二进制 codec 和产品标识,返回包含 Word 文档、模板服务与菜单入口的 Classic 插件。
function createClassicWordDocxPlugin(options?: ClassicWordDocxPluginOptions): ClassicEditorPluginPro 审阅面板、内容控件界面,及可选 AI、PDF/OFD 适配器需要单独装配,本示例不声称已安装它们。
下一步接入保存、打开与文件转换,再按配置说明调整产品界面。